简述uniapp的image标签的mode属性

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

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 的 <image> 与传统 web 开发中的 <img> 相比多了一个 mode 属性，用来设置图片的裁剪、缩放模式。

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

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

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

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

lazy-load

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

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