微信小程序Image标签 mode=“widthFix” 问题

微信小程序中加载图片时,如果只设定图片宽度,希望添加 mode = 'widthFix'来自适应

<Image
  mode="widthFix"
  className={s.img]}
  src={ImgSource.iconLogin}
/>

.img {
  width: 100%;
}

但是这时会出现一个问题:
当页面刚打开时,会闪动一瞬间,之后才会变成自适应的高度,很影响体验。
官方资料没有比较合适的方案,我们可以根据图片实际高度设置个差不多的高度,这样虽然没有从根本上解决问题,但是可以让闪动没那么明显

.img {
  width: 100%;
  height: 300rpx;
}
THE END
posted @   ZerlinM  阅读(404)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示