微信小程序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;
    })
  },
相关推荐
不如摸鱼去18 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
anyup21 小时前
uni-app 没有根组件?仅需几行代码实现全局 Toast 和 Modal
前端·架构·uni-app
2501_9160074721 小时前
Python实现HTTPS爬虫的完整指南:使用requests、BeautifulSoup、Selenium和Scrapy
爬虫·python·ios·小程序·https·uni-app·iphone
FungLeo1 天前
Taro 开发小程序, 把 @ 配成 src 路径别名,webpack / tsconfig / scss 三处同步的正确姿势
webpack·小程序·taro
万亿少女的梦1681 天前
基于微信小程序、Express与MongoDB的校园失物招领系统设计
mongodb·微信小程序·node.js·express·系统设计
AI_AGENT_DEV_AI1 天前
原生 APP(iOS / Android)的开发与上线
uni-app
灵枢时代1 天前
小程序在生鲜配送行业,如何设计夜间预约和次日达的订单处理流程?
数据结构·人工智能·小程序
小徐_23331 天前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
skiyee2 天前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
2601_953720822 天前
【计算机毕业设计】基于微信小程序的拼车服务系统设计与实现
微信小程序·小程序·课程设计