小程序中的image标签

一.image标签的src属性

小程序代码上传要求在2M以内，因此静态资源比如图片等一般不与代码文件放在一块（因为很容易超出预算）

因此image的src属性不支持相对路径，src的属性值必须是绝对路径

<!-- 以下为错误写法 小程序image标签的src属性不支持相对路径 -->
<image src="../../img/random.jpg"></image>

<!-- 正确写法 -->
<image src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

除了将图片放在服务器数据库上，还可以将图片上传到图床上，并由图床生成图片的绝对路径

二.image标签的mode属性

基础知识：1）小程序图片默认宽高：320px*240px

                  2）image标签默认不保持原图片的宽高比 自己设置宽高时容易使图片变形

mode常用属性值：1）aspectFit  可以使图片的较长边完整地显现出来

                                    但又不会超出image设置的宽高大小  常用于轮播图

                               2）aspectFill  可以使图片的短边完整地显现出来

                                    设置该值可能看不到完整的较长边  较少用

                               3）widthFix  相当于WEB中只设置宽而不设置高

                                    图片将等比例缩放  最常用

                                      4）方向值top、bottom、left、right

                                            top left、top right、bottom left、bottom right

                                            不缩放图片，将图片置于对应的方向上，类似于background-position

                                            当设置的image宽高小于默认宽高时，将对图片进行对应方向上的裁剪

<image mode="aspectFit" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

<image mode="aspectFill" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

<image mode="widthFix" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

<image mode="top | bottom | left | right | top left | top right | bottom left | bottom right" src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>

三.image标签的lazy-load属性

小程序中的图片直接支持懒加载（即在加载图片之后会自动保存在缓存中实现节流）

<image lazy-load src="https://z3.ax1x.com/2021/03/31/ckVNT0.jpg"></image>
<!-- 也可以写成lazy-load="{{true}}" -->