简述uniapp的image标签的mode属性

uni-app的image标签是用于显示图片的组件，而mode属性则用于设置图片的显示模式，这个也是传统 web 开发中的 标签中没有的。

mode属性有以下几种取值：

1. aspectFit：按照原始比例缩放图片，使图片的长边能完全显示在容器内，可能会露出空白区域。
2. aspectFill：按照原始比例缩放图片，使图片的短边能完全填充容器，可能会裁剪掉部分图片。
3. widthFix：宽度不变，高度自动变化，保持原始宽高比。
4. heightFix：高度不变，宽度自动变化，保持原始宽高比。
5. scaleToFill：拉伸图片以填满容器，不保持原始宽高比，可能导致图片变形。
6. fitCenter：先按照aspectFit的方式进行缩放，之后居中显示图片，可能会露出空白区域。
7. top：将图片的顶部对齐到容器的顶部。
8. bottom：将图片的底部对齐到容器的底部。
9. left：将图片的左边对齐到容器的左边。
10. right：将图片的右边对齐到容器的右边。
11. topLeft：将图片的左上角对齐到容器的左上角。
12. topRight：将图片的右上角对齐到容器的右上角。
13. bottomLeft：将图片的左下角对齐到容器的左下角。
14. bottomRight：将图片的右下角对齐到容器的右下角。

• Uniapp 的 与传统 web 开发中的 相比多了一个 mode 属性，用来设置图片的裁剪、缩放模式。

• 在开发中尽量养成每一个 都设置 mode 的习惯。可以规避掉很多 UI 显示异常的问题。

• 一般只需要使用 widthFix、aspectFill 这两个属性即可应对绝大多数情况。

  即只需设置宽度自动撑起高度的图片用 widthFix ；需要固定尺寸设置宽高，并保持图片不被拉伸的图片用 aspectFill。

  例如：所有 icon、文章详情里、产品详情里的详情图一般会用 widthFix，用户头像、缩略图一般会用 aspectFill。

lazy-load

• 图片懒加载，小程序支持，只针对 page 与 scroll-view 下的 image 有效。

通过设置mode属性，可以根据需求选择合适的图片显示效果。