微信小程序图片上传（土豆温床）

注意：
    小程序图片标签与传统web的图片标签不一样，小程序后期打包上线有大小要求（2M以内），所以很多静态资源我们会将其放到网络上，所以当我们使用图片资源时，统一使用外网图片。
    这里我们推荐使用土豆图床https://images.ac.cn/

　　首先注册登录，然后拖进图片上传

　　

　　开始测试如下

　　1、src属性：图片资源路径

　　

　　2、mode属性：图片裁剪、缩放的模式

　　例如将图片宽设为500rpx，高为800rpx，如下所示，会出现图片拉伸变形

　　

　　mode的14种取值如下

值	说明	最低版本
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

　　如下所示，可以结合Snipate截图工具进行缩放介绍

　　

　　小结：