微信小程序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;
    })
  },
相关推荐
一 乐15 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
全栈软件开发1 天前
新版点微同城主题源码34.7+全套插件+小程序前后端 源文件
小程序
毕设源码-朱学姐1 天前
【开题答辩全过程】以 基于java的民宿管理小程序为例,包含答辩的问题和答案
java·开发语言·小程序
QuantumLeap丶1 天前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
用户9714171814271 天前
uniapp页面路由
vue.js·uni-app
Kingsaj1 天前
uni-app打包app -- 在用户首次启动 App 时,强制弹出一个“用户协议与隐私政策”的确认对话框。
服务器·ubuntu·uni-app
Vue10241 天前
uniapp 使用renderjs 封装 video-player 视频播放器, html5视频播放器-解决视频层级、覆盖、播放卡顿
uni-app·音视频·html5
钱端工程师1 天前
uniapp封装uni.request请求,实现重复接口请求中断上次请求(防抖)
前端·javascript·uni-app
茶憶1 天前
uni-app app移动端实现纵向滑块功能,并伴随自动播放
javascript·vue.js·uni-app·html·scss
dcloud_jibinbin1 天前
【uniapp】解决小程序分包下的json文件编译后生成到主包的问题
前端·性能优化·微信小程序·uni-app·vue·json