微信小程序Image标签 mode=“widthFix” 问题
微信小程序中加载图片时,如果只设定图片宽度,希望添加 mode = 'widthFix'来自适应
<Image
mode="widthFix"
className={s.img]}
src={ImgSource.iconLogin}
/>
.img {
width: 100%;
}
但是这时会出现一个问题:
当页面刚打开时,会闪动一瞬间,之后才会变成自适应的高度,很影响体验。
官方资料没有比较合适的方案,我们可以根据图片实际高度设置个差不多的高度,这样虽然没有从根本上解决问题,但是可以让闪动没那么明显
.img {
width: 100%;
height: 300rpx;
}