创新互联百度小程序教程：image 图片
- image 图片
- 属性说明
- 示例
- 代码示例 1：自定义缩放模式
- 代码示例 2：不缩放图片，自定义裁切模式
- 代码示例 3：iOS 可支持 webp
- 代码示例 4：可放动图
- Bug & Tip
image 图片
解释：图片，支持 JPG、PNG、GIF、BMP、WEBP 等格式。image 组件默认宽度 300px 、高度 225px 。
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了山阳免费建站欢迎大家使用！
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|
|
src
|
String
|
否
|
图片资源地址
|
|
mode
|
String
|
scaleToFill
|
否
|
图片裁剪、缩放的模式
|
|
webp
|
Boolean
|
false
|
否
|
只针对 iOS 端，且 iOS 系统默认不解析 WEBP 格式，只支持网络资源
|
3.180.1
|
|
lazy-load
|
Boolean
|
false
|
否
|
图片懒加载，在图片即将进入一定范围（距离当前屏 50px）时才开始进行加载
|
|
image-menu-prevent
|
Boolean
|
false
|
否
|
阻止长按图片时弹起默认菜单（即将该属性设置为image-menu-prevent=”true”或image-menu-prevent），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性。注：长按菜单后的操作暂不支持 svg 格式
|
3.170.1
|
|
preview
|
Boolean
|
否
|
点击后是否预览图片。在不设置的情况下，若 image 未监听点击事件且宽度大于 1/4 屏宽，则默认开启
|
3.170.9
|
|
original-src
|
string
|
否
|
预览时显示的图片地址
|
3.170.9
|
|
binderror
|
EventHandle
|
否
|
当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}
|
|
bindload
|
EventHandle
|
否
|
当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:’图片高度 px’, width:’图片宽度 px’}
|
mode 有效值
有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
| 模式 | 值 | 说明 |
|---|
|
缩放
|
scaleToFill
|
不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
|
|
缩放
|
aspectFit
|
保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来
|
|
缩放
|
aspectFill
|
保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
|
|
缩放
|
widthFix
|
宽度不变，高度自动变化，保持原图宽高比不变
|
|
裁剪
|
top
|
不缩放图片，只显示图片的顶部区域
|
|
裁剪
|
bottom
|
不缩放图片，只显示图片的底部区域
|
|
裁剪
|
center
|
不缩放图片，只显示图片的中间区域
|
|
裁剪
|
left
|
不缩放图片，只显示图片的左边区域
|
|
裁剪
|
right
|
不缩放图片，只显示图片的右边区域
|
|
裁剪
|
top left
|
不缩放图片，只显示图片的左上区域
|
|
裁剪
|
top right
|
不缩放图片，只显示图片的右上区域
|
|
裁剪
|
bottom left
|
不缩放图片，只显示图片的左下区域
|
|
裁剪
|
bottom right
|
不缩放图片，只显示图片的右下区域
|
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例 1：自定义缩放模式
class="image-area {{item.hasBackgroud == 1 ? 'backGround': ''}}" data-name="{{item.mode}}" bindtap="onTap" mode="{{item.mode}}" src="{{src}}" binderror="imageError" bindload="imageLoad" /> {{item.text}}
代码示例 2：不缩放图片，自定义裁切模式
class="image-area" data-name="{{item.mode}}" bindtap="onTap" lazy-load="true" image-menu-prevent="true" mode="{{item.mode}}" src="{{src}}" binderror="imageError" bindload="imageLoad" /> {{item.text}}
代码示例 3：iOS 可支持 webp
iOS 可支持 webp
代码示例 4：可放动图
可放动图
Bug & Tip
- Tip：支持设置 CSS background-position 属性，但是不推荐使用，会影响对应 mode 类型的展示。
- Tip：未显示设置 preview 的图片会进行点击默认预览判断，建议显示设置 preview 。
- Tip：点击预览功能 iOS 端目前不支持本地图片预览，可以设置 original-src 为远程图片地址。
网站名称：创新互联百度小程序教程：image 图片
本文地址：
http://cdbrznjsb.com/article/djpeohs.html
