一、场景

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

二、思路

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

#uni.getImageInfo(OBJECT)

OBJECT 参数说明

参数名类型必填说明
srcString图片的路径,可以是相对路径,临时文件路径,存储文件路径,网络图片路径
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名类型说明平台差异说明
widthNumber图片宽度,单位px
heightNumber图片高度,单位px
pathString返回图片的本地路径
orientationString返回图片的方向,有效值见下表App、小程序、京东小程序
typeString返回图片的格式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; // 设置最大宽度不能超过屏幕
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐