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;
},
1
2
3
4
5
6
7

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

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

this.imgheight = src / (uni.upx2px(src) / src);
1