微信小程序image组件图片设置最大宽度 宽高自适应

问题描述:在使用微信小程序image组件的时候,在不确定图片宽高情况下 想给一个最大宽度让图片自适应,按比例,image的widthfiex和heightFiex并不能满足(只指定最大宽/高并不会生效)

问题解决:使用bindload获取图片信息获取宽高再判断是否超过最大值

html 复制代码
   <image class="bubbleImg" src="{{imageUrl}}" bindload="onImageLoad" style="width: {{imgWidth || 0}}px;" mode="widthFix"></image>
   
js 复制代码
 //获取图片宽度
  onImageLoad(event) {
    var { width } = event.detail;
    const key = event.currentTarget.dataset.key;
    if(width>200){ //最大值为200px
	   width=200
	}
    this.setData({
      imgWidth : width;
    })
  },
相关推荐
bug总结43 分钟前
深入理解 uni-app 的 uni.createSelectorQuery()
uni-app
weixin_lynhgworld1 小时前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld1 小时前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
真上帝的左手1 小时前
25. 移动端-uni-app
uni-app
编程猪猪侠1 小时前
基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能(分步骤详解)
uni-app
小徐_23334 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
斯~内克4 小时前
UniApp 页面传参方式详解
网络协议·udp·uni-app
一匹电信狗4 小时前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
我叫黑大帅5 小时前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
大聪明了7 小时前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app