小程序image标签的高度

imag标签的属性mode="widthFix"

例如： <image mode="widthFix" src="../../images/Product_story_xq.png"></image>

针对引入图片后高度显示不正确：

1.image标签的默认属性——height：“240px”.

2.image标签不确认高度没有办法写属性：height。

解决方法：

image标签加入 mode="widthFix"这样的效果是图片自动匹配高度

例如： <image mode="widthFix" src="../../images/Product_story_xq.png"></image>

因为微信小程序的图片image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为图片高度默认240px

只需要添加属性 mode="widthFix"

<image class="img" src="../images/1.png" mode="widthFix">

设置宽度100%，

.img{width: 100%}

这样就可以实现图片宽度100%高度自适应，图片不会拉伸

webp 是 image 组件的一个 boolean 属性，开启这个属性后，代表 url 可以设置 webp 这种格式的图片。image 默认不解析 webP 格式，只支持网络资源

有科技博客曾经报道，YouTube 上的视频缩略图采用 webp 格式后，网页加载速度提高 1/10。Google 的 Chrome 网上应用商店，应用这种格式后每天节省几 TB 带宽。

在线转化网址： 智图https://zhitu.isux.us/

转化后的图片直接使用 Google 浏览器就能打开。

小程序 image 组件常见问题

---