开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情

支付宝小程序中的图片组件与微信小程序还是有很多不同的。

<image/>组件

使用图片时有限制，如下：

1. 使用 webview 嵌套 H5 时，若遇到图片资源不显示问题，可查看 配置 H5 白名单流程 获取 H5 页面中所有的域名地址（含图片静态资源的地址），全部加入域名白名单中。
2. 在<rich-text>富文本中，插入html的img标签的话，也需要把图片加入到白名单内。

mode属性：模式

1. 作用：主要指的是图片与外边包裹的元素之间的缩放关系
2. mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

缩放模式

属性	描述
scaleToFill	不保持纵横比缩放，使图片的宽高完全拉伸至填满 image 元素。
aspectFit	保持纵横比缩放，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	保持纵横比缩放，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	宽度不变，高度自动变化，保持原图宽高比不变。
heightFix	高度不变，宽度自动变化，保持原图宽高比不变。 版本要求：基础库 2.7.0及以上

注意：image 组件默认宽度 300px、高度 225px。

裁剪模式

属性	描述
top	不缩放图片，只显示顶部区域。
bottom	不缩放图片，只显示底部区域。
center	不缩放图片，只显示中间区域。
left	不缩放图片，只显示左边区域。
right	不缩放图片，只显示右边区域。
top left	不缩放图片，只显示左上边区域。
top right	不缩放图片，只显示右上边区域。
bottom left	不缩放图片，只显示左下边区域。
bottom right	不缩放图片，只显示右下边区域。

图片组件可以添加lazy-load：boolean值类型；可以实现懒加载。

以上呢就是对<image>组件的介绍，觉得可以的话，路过的小伙伴留个赞赞吧。