uniapp中uni.getImageInfo渲染页面不生效的坑

uniapp中uni.getImageInfo渲染页面不生效的坑

  • 问题

写详情页(nvue页面)简介部分的时候发现那个大图片的高度不能自适应,后面的mode各种改变依然达不到想要的效果,又不能设置固定高度,所以只能js部分给它动态设置了

  • 解决

后来发现文档中有一个获取图片信息的方法:uni.getImageInfo(OBJECT)
在这里插入图片描述
在这里插入图片描述
我想要的正是这个图片的高度 height ,然后就在页面上写了代码:
在这里插入图片描述
可是把imgheight渲染到页面上时,图片的高度并没有做出任何改变。

后来才了解到原来uni.getImageInfo可能是一个异步方法

async imagesHeight() {
	let src = this.coursedetail.imageUrl;
	src = (await uni.getImageInfo({
		src
	}))[1].height;
	this.imgheight = src;
},

这样就完美解决我的问题了。

注意:这个height的单位是px,而uniapp我们一般用的是rpx适配的,所以在这里我们需要转换一下单位

this.imgheight = src / (uni.upx2px(src) / src);
  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值