【uni-app】小程序使用getImageInfo和widthFix实现图片按自身尺寸展示

一、场景

uni-app编译微信小程序图片在不设定高度宽度样式时有默认宽高（如下图），即使设置了image图片的mode属性也无法让图片按自身宽高展示。这种场景在非固定宽高的渲染网络图片时会遇到

二、思路

使用uni.getImageInfo()方法获取图片信息宽高，然后再赋值渲染

#uni.getImageInfo(OBJECT)

OBJECT 参数说明

参数名	类型	必填	说明
src	String	是	图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success 返回参数说明

参数名	类型	说明	平台差异说明
width	Number	图片宽度，单位px
height	Number	图片高度，单位px
path	String	返回图片的本地路径
orientation	String	返回图片的方向，有效值见下表	App、小程序、京东小程序
type	String	返回图片的格式	App、小程序、京东小程序

注意：小程序下获取网络图片信息需先配置download域名白名单才能生效。

// 由于方法是异步的，渲染时高度会不生效，所以要加await
let imageInfoObj = await uni.getImageInfo({src: imageUrl}) 
// 取到图片的宽高
let { width,height } = imageInfoObj[1]

三、扩展场景

图片按自身宽高展示，但最大不能超过屏幕宽度

方法：使用uni.getImageInfo方法获得图片的宽度后，配合小程序image元素的mode属性，在已知宽度情况下，原图宽高比不变，图片高度会自适应

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

//html
<image 
    src="image.url" 
    mode="widthFix"  
    :style="{ width:image.width + 'px'}">
</image>

//js 简写
async handleSetImageStyle() {
    // 由于方法是异步的，渲染时高度会不生效，所以要加await
    let imageInfoObj = await uni.getImageInfo({src: imageUrl}) 

    // 取到图片的宽高
    let { width,height } = imageInfoObj[1]

    //配合image的mode使用只需要设置宽度
    this.$set(this.image, 'width', width)

}

// css部分

.image {
    max-width: 100vw; // 设置最大宽度不能超过屏幕
}