微信小程序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;
    })
  },
相关推荐
阿凤211 天前
uniapp运行到app端怎么打开文件
android·前端·javascript·uni-app
00后程序员张1 天前
完整教程:如何将iOS应用程序提交到App Store审核和上架
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 天前
iOS应用性能优化全解析:卡顿、耗电、启动与瘦身
android·ios·性能优化·小程序·uni-app·iphone·webview
大力水手~1 天前
小程序模仿iphone苹果手机滑动选时间
智能手机·小程序
杰建云1671 天前
小程序如何做裂变?
小程序·小程序制作
Front思1 天前
解决 uniapp Dart Sass 2.0.0 弃用警告
前端·uni-app·sass
Evavava啊1 天前
iOS微信小程序WebView中按钮背景渐变显示问题解决方案
ios·微信小程序·h5·渲染
阳光雨滴1 天前
微信小程序使用canvas自定义富文本内容做图片分享
微信小程序·小程序
杰建云1671 天前
小程序如何做活动?
小程序·小程序制作
这是个栗子1 天前
【微信小程序问题解决】微信小程序全局 navigationBarTitleText 不起作用
微信小程序·小程序·导航栏