微信小程序 image 图片 组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看)
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
src | string | 否 | 图片资源地址 | 1.0.0 | |
mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
webp | boolean | false | 否 | 默认不解析 webP 格式,只支持网络资源 | 2.9.0 |
lazy-load | boolean | false | 否 | 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 | 1.5.0 |
show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 | 2.7.0 |
binderror | eventhandle | 否 | 当错误发生时触发,event.detail = {errMsg} | 1.0.0 | |
bindload | eventhandle | 否 | 当图片载入完毕时触发,event.detail = {height, width} | 1.0.0 |
mode 的合法值
值 | 说明 | 最低版本 |
---|---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 | |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 | |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 | |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 | |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 | 2.10.3 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 | |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 | |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 | |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 | |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 | |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 | |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 | |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 | |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |
Bug & Tip
tip
:image组件默认宽度320px、高度240pxtip
:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
示例代码
在开发者工具中预览效果
原图
index.wxml
<view class="page"><view class="page__hd"><text class="page__title">image</text><text class="page__desc">图片</text></view><view class="page__bd"><view class="section section_gap" wx:for-items="{{array}}" wx:for-item="item"><view class="section__title">{{item.text}}</view><view class="section__ctn"><image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image></view></view></view>
</view>
index.js
Page({data: {array: [{mode: 'scaleToFill',text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'}, {mode: 'aspectFit',text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'}, {mode: 'aspectFill',text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'}, {mode: 'top',text: 'top:不缩放图片,只显示图片的顶部区域'}, {mode: 'bottom',text: 'bottom:不缩放图片,只显示图片的底部区域'}, {mode: 'center',text: 'center:不缩放图片,只显示图片的中间区域'}, {mode: 'left',text: 'left:不缩放图片,只显示图片的左边区域'}, {mode: 'right',text: 'right:不缩放图片,只显示图片的右边边区域'}, {mode: 'top left',text: 'top left:不缩放图片,只显示图片的左上边区域'}, {mode: 'top right',text: 'top right:不缩放图片,只显示图片的右上边区域'}, {mode: 'bottom left',text: 'bottom left:不缩放图片,只显示图片的左下边区域'}, {mode: 'bottom right',text: 'bottom right:不缩放图片,只显示图片的右下边区域'}],src: '../resources/cat.jpg'},imageError: function (e) {console.log('image3发生error事件,携带值为', e.detail.errMsg)}
})
运行效果:
微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。
微信小程序 image 图片 组件相关推荐
- 微信小程序 image图片组件实现宽度固定 高度自适应
添加mode属性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode=& ...
- 微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
- 微信小程序上传组件(可同时长传图片+视频)
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
- 微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
- 微信小程序自定义标签组件component封装、组件生命周期,组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信 本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
- 微信小程序操作图片放大、缩小、旋转、拖拽
微信小程序操作图片放大.缩小.旋转.拖拽 在开发小程序的时候遇到了上传图片,然后编辑的需求.打算网上找一下相关代码组件的,就不用自己搞这么麻烦.经过一番折腾,还是没有找到如意的,最后自己弄好了,记录一 ...
- ready等方法 微信小程序_微信小程序设置图片固定比例
小编了解到,微信小程序成为当下热门话题,下面从多个方面来谈谈微信小程序设置图片固定比例 . 12月28日消息,微信官方日前发布消息称,为了让微信小程序相关成员在无线端更方便地管理微信小程序,将开发小程 ...
- 微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
最新文章
- (常用API)正则表达式邮箱地址验证
- Angular self study 3 - data binding
- 如何将ListT转换相应的Html(xsl动态转换)(二)
- 【Azure Show】|第九期 “我的计算机入门之路” 嘉宾秦婷婷汪宇杰文轩
- CentOS切换运行级别 图形模式/命令行模式
- 文本备份云仓库-python实用脚本下载
- go grpc 异步_dubbogo 3.0:牵手 gRPC 走向云原生时代
- 详解百度地图API之地图操作
- TensorBoard 使用案例
- 2008下mysql补丁_windows Server 2008 R2安装Mysql 8的打补丁顺序
- 网页设计html流水效果图,15例简单常用网页设计效果代码
- C语言#include<stdio.h>什么意思?
- matlab设置图片背景透明_MATLAB设置图片背景透明,和设定大小,适合论文中使用...
- 谷歌怎么设置下载位置
- Unite 2018 | 《崩坏3》:在Unity中实现高品质的卡通渲染
- Ubuntu18.04上传文件夹到github
- 霍尼韦尔启动在武汉的新兴市场中国总部;红牛商标所有者​天丝集团扩建在华生产基地 | 美通企业日报...
- 关于数据仓库面试题的整理
- postman基本使用+post请求结构
- SpringCloud-Gataway网关的使用