uniapp学习之旅image组件

• <image> 组件默认宽度 300px、高度 225px；app-nvue平台，暂时默认为屏幕宽度
• src 仅支持相对路径、绝对路径，支持 base64 码；
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。
• 自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。
• webp格式的图片在Android上是内置支持的。iOS上不同平台不一样，具体如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
• svg 格式的图片在不同的平台支持情况不同。具体为：app-nvue 不支持 svg 格式的图片，小程序上只支持网络地址。

 

图片和tips取自uniapp官方文档https://uniapp.dcloud.io/component/image

几种模式常用

演示，原图片，图片来自网络，侵权必删

<image src="../../static/girl.gif" mode=""></image>
<image src="../../static/girl.gif" mode="aspectFit"></image>
<image src="../../static/girl.gif" mode="aspectFill"></image>

 三种模式

组件默认宽度 300px、高度 225px，将原图裁剪了

 

第二种为aspectFit模式 等比例缩放按照长边缩放，能完全显示出来

第三种按照短边缩放，进行了裁剪