uniapp的image标签的mode属性

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

mode属性有以下几种取值：

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

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

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

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

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

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

lazy-load
图片懒加载，小程序支持，只针对 page 与 scroll-view 下的 image 有效。
通过设置mode属性，可以根据需求选择合适的图片显示效果。