微信小程序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;
    })
  },
相关推荐
V+zmm101343 小时前
基于微信小程序的乡村政务服务系统springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·ssm
还这么多错误?!3 小时前
uniapp微信小程序,使用fastadmin完成一个一键获取微信手机号的功能
微信小程序·小程序·uni-app
_院长大人_3 小时前
微信小程序用户信息解密 AES/CBC/NoPadding 解密失败问题
微信小程序·小程序
IT 前端 张3 小时前
Uniapp 手机基座调试App 打包成Apk文件,并上传到应用商店
uni-app
User_undefined3 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
web135085886354 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
麦兜*4 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
veminhe4 小时前
uni-app使用组件button遇到的问题
uni-app·vue
m0_748240024 小时前
uniapp跨平台开发---webview调用app方法
uni-app
guanpinkeji4 小时前
废品回收小程序:助力企业转型发展
小程序·小程序开发·小程序制作·回收·废品回收小程序·废品回收