因为image组件默认是有宽度跟高度的,所以这个高度不怎么好写
通过@load事件来控制图片的高度
话不多说,直接上代码,
<image
class="img"
src="@/static/image.png"
:style="{ height: imgHeight + 'px' }"
mode="widthFix"
@load="onImgLoad">
</image>
data() {
return {
imgHeight: 0
}
},
methods: {
onImgLoad(e) {
// 当图片加载完成后,获取图片的原始宽度和高度,并根据宽度计算出高度
const { width, height } = e.mp.detail;
this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
},
},
.img{
width: 100%;
}
随手一记~