咨询热线
137 1731 25507×24小时服务热线
微信交流
终于等到你，还好我没放弃微信小程序提供了用于显示图片的image组件，并且image组件的功能比HTML中的＜img＞标签更强大，支持对图片进行剪裁和缩放。image组件的默认宽度为300px，默认高度为240px。image组件通过＜image＞标签定义，支持单标签和双标签两种写法。
| 属性 | 类型 | 说明 |
|---|---|---|
| src | string | 图片资源地址src可以是本地路径或URL地址。如果使用本地路径，可以在项目中创建一个目录，例如images目录，并在该目录中放入图片，例如test.jpg，通过本地路径/images/test.jpg即可引用图片。 |
| mode | string | 图片剪裁、缩放的模式 |
| webp | boolean | 默认不解析WebP格式，只支持网络资源 |
| lazy-load | boolean | 图片延迟加载 |
| show-menu-by-longpress | boolean | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 |
| binderror | eventhandle | 当错误发生时触发，event.detail ={errMsg} |
| bindload | eventhandle | 当图片载入完毕时触发，event.detail ={height,width} |
| 模式 | 合法值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持宽高比缩放图片，使图片的宽高完全拉伸至填满image元素。此合法值为mode属性的默认值 |
| aspectFit | 保持宽高比缩放图片，使图片的长边能完全显示出来，即可以完整地将图片显示出来 | |
| aspectFill | 保持宽高比缩放图片，只保证图片的短边能完全显示出来，即图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 | |
| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 | |
| heightFix | 高度不变，宽度自动变化，保持原图宽高比不变 | |
| 裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
| bottom | 不缩放图片，只显示图片的底部区域 | |
| center | 不缩放图片，只显示图片的中间区域 | |
| left | 不缩放图片，只显示图片的左边区域 | |
| right | 不缩放图片，只显示图片的右边区域 | |
| top left | 不缩放图片，只显示图片的左上边区域 | |
| top right | 不缩放图片，只显示图片的右上边区域 | |
| bottom left | 不缩放图片，只显示图片的左下边区域 | |
| bottom right | 不缩放图片，只显示图片的右下边区域 |