微信小程序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;
    })
  },
相关推荐
weixin_lynhgworld1 小时前
抽取类盲盒小程序的五条合规红线意味着什么?
小程序
现任明教教主~2 小时前
运营级多门店洗车贴膜汽车在线核销保养服务系统洗车预约洗车系统消费分佣扫码核销系统
微信小程序·小程序·汽车
小小王app小程序开发3 小时前
盲盒微信小程序开发实战:架构、核心难点与实现方案
小程序
陪我去看海5 小时前
被要求猛出小程序,做了这个多平台多环境的部署替我承受压力
前端·微信小程序·抖音小程序
無名路人5 小时前
小程序点餐页吸顶滚动之分类按需加载,上划切换
前端·vue.js·微信小程序
用户7884773163414 小时前
一个门店预约小程序,真正难的不是页面,是这 4 个后端接口
微信小程序
CHB15 小时前
一文讲透原生渲染和自渲染
flutter·react native·uni-app
老马识码15 小时前
一个围棋小程序里的七个 Agent:场景、提示词和结构化输出的门道
人工智能·微信小程序
拖孩15 小时前
一个人 + AI 做的小程序,一个半月把服务器钱赚回来一半了
前端·后端·微信小程序
前端小万6 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序