微信小程序image组件图片设置最大宽度 宽高自适应

news/2024/7/20 1:44:26 标签: 微信小程序, uni-app, 小程序

问题描述:在使用小程序>微信小程序image组件的时候,在不确定图片宽高情况下 想给一个最大宽度让图片自适应,按比例,image的widthfiex和heightFiex并不能满足(只指定最大宽/高并不会生效)

问题解决:使用bindload获取图片信息获取宽高再判断是否超过最大值

   <image class="bubbleImg" src="{{imageUrl}}" bindload="onImageLoad" style="width: {{imgWidth || 0}}px;" mode="widthFix"></image>
   
 //获取图片宽度
  onImageLoad(event) {
    var { width } = event.detail;
    const key = event.currentTarget.dataset.key;
    if(width>200){ //最大值为200px
	   width=200
	}
    this.setData({
      imgWidth : width;
    })
  },

http://www.niftyadmin.cn/n/5208705.html

相关文章

【Unity】IBeginDragHandler、IDragHandler 和 IEndDragHandler 介绍

IBeginDragHandler、IDragHandler 和 IEndDragHandler 介绍 IBeginDragHandler、IDragHandler 和 IEndDragHandler 是 Unity 引擎中的三个接口&#xff0c;用于处理 UI 元素的拖放事件。这些接口通常结合使用&#xff0c;构成了 Unity 引擎的拖放事件系统。 IBeginDragHandler…

沃趣班11月月考题目解析

沃趣班11月月考题目解析 1.在oracle中创建用户时&#xff0c;若未设置default tablespace关键字&#xff0c;则oracle将哪个表空间分配给用户作为默认表空间 答案&#xff1a;D.user SQL> create user mytest identified by 123456; SQL> grant connect to mytest; SQL…

SpringCache使用详解

SpringCache 1.新建测试项目SpringCache2.SpringCache整合redis2.1.Cacheable2.2.CacheEvict2.3.Cacheput2.4.Caching2.5.CacheConfig 3.SpringCache问题4.SpringCache实现多级缓存 1.新建测试项目SpringCache 引入依赖 <dependencies><dependency><groupId&g…

Redis深入理解-Socket连接建立流程以及文件事件处理机制

Redis Server 运行原理图 Redis 服务器中 Socket 网络建立以及文件事件模型 一个 redis 单机&#xff0c;可以抗几百上千的并发&#xff0c;这里的并发指的就是同时可以有几百个 client 对这个 redis server 发起请求&#xff0c;都需要去建立网络连接&#xff0c;同时间可能会…

使用whisper实现语音转文本

项目地址&#xff1a;GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision 1、需要py3.8环境 conda activate p38 2、安装 pip install -U openai-whisper 3、下载项目 pip install githttps://github.com/openai/whisper.git 4、安装…

《十堂课学习 Flink SQL》第一章:引言和背景

第一章是关于 Flink SQL 课程的引言和背景。这一章旨在概述有关大数据处理、流处理以及 Flink SQL 的基础知识&#xff0c;以便接下来能够更好地结合上下文进行学习。 1.1 大数据处理的背景 1.1.1 大数据概述 大数据是指规模巨大、高度复杂且难以用传统数据库管理工具进行捕获…

二叉树:C++实现

引言&#xff1a; 二叉树是一种常见的数据结构&#xff0c;它具有良好的适用性和灵活性&#xff0c;能够应用于各种领域。在C中实现二叉树可以通过使用模板类和结构体来实现。下面我们将介绍如何在C中实现二叉树&#xff0c;并提供一些基本的操作方法。 技术实现&#xff1a; …

Nginx常用负载均衡策略

Nginx常用负载均衡策略 轮询&#xff08;默认&#xff09; 注意&#xff1a;这里的轮询并不是每个请求轮流分配到不同的后端服务器&#xff0c;与ip_hash类似&#xff0c;但是按照访问url的hash结果来分配请求&#xff0c;使得每个url定向到同一个后端服务器&#xff0c;主要…