更新时间：2022-09-01 15:48:03贡献者 2收藏订阅更新我的文档设置返回文档简介图片。支持 jpg、png、svg、webp、gif 等格式。使用限制使用 webview 嵌套 h5 时，若遇到图片资源不显示问题，可查看 配置 h5 白名单流程 获取 h5 页面中所有的域名地址（含图片静态资源的地址），全部加入域名白名单中。扫码体验使用在线示例属性说明属性类型描述srcstring图片地址。modestring图片模式。 默认值： scaletofillclassstring外部样式。stylestring内联样式。lazy-loadboolean支持图片懒加载，不支持通过 css 来控制 image 展示隐藏的场景。 默认值： false 版本要求： 基础库 1.9.0 及以上default-sourcestring默认图片地址，若设置默认图片地址，会先显示默认图片，等 src 对应的图片加载成功后，再渲染对应的图片。 版本要求： 基础库 1.19.0 及以上onloadeventhandle图片载入完毕时触发，事件对象 event.detail = {height: '图片高度px', width: '图片宽度px'}。onerroreventhandle当图片加载错误时触发，事件对象 event.detail = {errmsg: 'something wrong'。ontapeventhandle点击图片时触发。catchtapeventhandle点击图片时触发，阻止事件冒泡。注意：image 组件默认宽度 300px、高度 225px。modemode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。缩放模式属性描述scaletofill不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素。aspectfit保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectfill保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。widthfix宽度不变，高度自动变化，保持原图宽高比不变。heightfix高度不变，宽度自动变化，保持原图宽高比不变。 版本要求：基础库 2.7.0及以上裁剪模式属性描述top不缩放图片，只显示顶部区域。bottom不缩放图片，只显示底部区域。center不缩放图片，只显示中间区域。left不缩放图片，只显示左边区域。right不缩放图片，只显示右边区域。top left不缩放图片，只显示左上边区域。top right不缩放图片，只显示右上边区域。bottom left不缩放图片，只显示左下边区域。bottom right不缩放图片，只显示右下边区域。说明：图片高度不能设置为 auto，如果需要图片高度为 auto，直接设置 mode 为 widthfix。bug & tip在 android 系统中，如果给 image 设置缩放模式为 mode="widthfix" 的同时添加了 display: flex 样式，需要额外设置以下两种中的一种样式:●同时指定 flex-direction: column。●当 flex-direction: row (默认值) 时，同时指定交叉轴对齐方式 align-items ，并确保 align-items 不从 normal、stretch、inherit、initial、unset 中取值。常见问题image 标签支持读取流文件吗？小程序中显示二进制数据流的图片，需要先将二进制数据转成 base64 字符串，然后把 base64 字符串放在 image 中的 src 中实现显示。为什么真机调用 image 组件，显示的图片被压缩？建议把 mode 值设为 widthfix。相关文档●my.chooseimage●my.compressimage●my.getimageinfo●my.previewimage●my.saveimage
