当前位置: 首页 > news >正文

微信小程序 图片自适应高度 宽度 完美适配原生或者uniapp


 

--

-

-

-

查了一下百度看到网上图片高度自适应的解决方案

基本是靠JS获取图片的宽度进行按比例计算得出图片高度。

不是很符合我的需求/

于是我脑瓜子一转 想到一种新的解决方案 不用JS计算也能完美解决。

我写了一个组件,直接导入可以使用。

-

-

-

1.新建一个组件bl-adaptation-img.vue

2.在main.js中导入

// 自适应图片图片高度 宽度100%
import blAdaptationImg from '@/components/baseUI/bl-adaptation-img/index.vue'
Vue.component('bl-adaptation-img', blAdaptationImg);

 3.编写组件代码

/*** 微信公众号小程序商城系统!* Copyright © 2024 保留所有权利* =========================================================* 版本:V1* 授权主体:chenfeili* 授权域名:****** 授权码:******** ----------------------------------------------* 您只能在商业授权范围内使用,不可二次转售、分发、分享、传播* 未经授权任何企业和个人不得对代码以任何目的任何形式的再发布* =========================================================*/<template><bctos-rich-text v-if="nodes" :nodes="nodes"></bctos-rich-text>
</template><script>export default {props: {imgURl: {type: String,default: ''}},data() {return {nodes: ''}},watch: {imgURl: {handler(val) {this.nodes = val ? `<img src="${val}" style="max-width:100%;height:auto;"/>` : ''},immediate: true,deep: true}}}
</script><style lang="scss" scoped>
</style>

目前使用的是uniapp的富文本组件bctos-rich-text    如果是原生的小程序可以使用 <rich-text></rich-text>

4.在页面文件中使用

<view v-if="caateInfo.flow_img" class="mt-30 pl-30 pr-30"><bl-adaptation-img :imgURl="caateInfo.flow_img"></bl-adaptation-img>
</view>

相关文章:

微信小程序 图片自适应高度 宽度 完美适配原生或者uniapp

-- - - - 查了一下百度看到网上图片高度自适应的解决方案 基本是靠JS获取图片的宽度进行按比例计算得出图片高度。 不是很符合我的需求/ 于是我脑瓜子一转 想到一种新的解决方案 不用JS计算也能完美解决。 我写了一个组件&#xff0c;直接导入可以使用。 - - - 1.新…...

Go语言基础之反射

1.变量的内在机制 Go语言中的变量是分为两部分的: 类型信息&#xff1a;预先定义好的元信息。值信息&#xff1a;程序运行过程中可动态变化的。 2.反射介绍 反射是指在程序运行期间对程序本身进行访问和修改的能力。程序在编译时&#xff0c;变量被转换为内存地址&#xff…...

MySQL十部曲之六:数据操作语句(DML)

文章目录 前言语法约定DELETEINSERTSELECT查询列表SELECT 选项子句FROMWHEREORDER BYGROUP BYHAVINGWINDOWLIMITFOR SELECT ... INTO连接查询CROSS JOIN和INNER JOINON和USINGOUTER JOINNATURE JOIN 子查询标量子查询使用子查询进行比较带有ANY、IN或SOME的子查询带有ALL的子查…...

Quartus生成烧录到FPGA板载Flash的jic文件

简要说明&#xff1a; Altera的FPGA芯片有两种基本分类&#xff0c;一类是纯FPGA&#xff0c;另一类是FPGASoc&#xff08;System on chip)&#xff0c;也就是FPGAHPS&#xff08;Hard Processor System&#xff0c;硬核处理器&#xff09;&#xff0c;对应两种Flash烧录方式&a…...

CSS 多色正方形上升

<template><view class="loop cubes"><view class="item cubes"></view> <!-- 方块1 --><view class="item cubes"></view> <!-- 方块2 --><view class="item cubes"></vie…...

《HelloGitHub》第 94 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 …...

uniapp 实现路由拦截,权限或者登录控制

背景&#xff1a; 项目需要判断token&#xff0c;即是否登录&#xff0c;登录之后权限 参考uni-app官方&#xff1a; 为了兼容其他端的跳转权限控制&#xff0c;uni-app并没有用vue router路由&#xff0c;而是内部实现一个类似此功能的钩子&#xff1a;拦截器&#xff0c;由…...

[GXYCTF2019]BabySQli1

单引号闭合&#xff0c;列数为三列&#xff0c;但是没有期待的1 2 3回显&#xff0c;而是显示wrong pass。 尝试报错注入时发现过滤了圆括号&#xff0c;网上搜索似乎也没找到能绕过使用圆括号的方法&#xff0c;那么按以往爆库爆表爆字段的方法似乎无法使用了 在响应报文找到一…...

【架构】Docker实现集群主从缩容【案例4/4】

实现集群主从缩容【4/4】 接上一节&#xff0c;在当前机器为4主4从的架构上&#xff0c;减缩容量为3主3从架构。即实现删除6387和6388. 示意图如下&#xff1a; 第一步&#xff1a;查看集群情况&#xff08;第一次&#xff09; redis-cli --cluster check 127.0.0.1:6387roo…...

【ArcGIS微课1000例】0097:栅格重采样(以数字高程模型dem为例)

Contents 1. 最邻近法(Nearest Neighbor)2. 双线性内插法(Bilinear Interpolation)3. 三次卷积法(Cubic Convolution)4. ArcGIS重采样工具(Resample)5. 注意事项栅格/影像数据进行配准或纠正、投影等几何变换后,像元中心位置通常会发生变化,其在输入栅格中的位置不一…...

【技术分享】Ubuntu 20.04如何更改用户名

产品简介 本文适用于所有RK3568/RK3588平台产品在Ubuntu 20.04系统上如何更改用户名&#xff0c;本文以IDO-EVB3588开发板为例&#xff0c;在ubuntu20.04系统上修改用户名industio为usernew。 IDO-EVB3588开发板是一款基于RK3588平台的产品。该开发板集成了四核Cortex-A76和四…...

LabVIEW振动信号分析

LabVIEW振动信号分析 介绍如何使用LabVIEW软件实现希尔伯特-黄变换&#xff08;Hilbert-Huang Transform, HHT&#xff09;&#xff0c;并将其应用于振动信号分析。HHT是一种用于分析非线性、非平稳信号的强大工具&#xff0c;特别适用于旋转机械等复杂系统的振动分析。开发了…...

清理Docker环境

清理Docker环境&#xff1a;有时&#xff0c;Docker环境可能会出现一些问题&#xff0c;导致网络连接故障。您可以尝试清理Docker环境并重新启动。可以尝试运行以下命令&#xff1a; 复制 docker-compose down docker system prune -a docker-compose up docker-compose up 和…...

oracle等保测评

实战|等保2.0 Oracle数据库测评过程 一、身份鉴别 a) 应对登录的用户进行身份标识和鉴别,身份标识具有唯一性,身份鉴别信息具有复杂度要求并定期更换; sysdba是Oracle数据库的最高权限管理员。通常使用sqlplus或PL/SQL 管理软件进行管理,PL/SQL 为第三方管理软件,但S…...

x-cmd pkg | go - Google 开发的开源编程语言

目录 简介首次用户技术特点竞品分析编译型语言解释型语言JavaWebAssebmly 进一步阅读 简介 Go 语言&#xff08;或 Golang&#xff09;是 Google 开发的开源编程语言&#xff0c;诞生于 2006 年。其设计目标是“兼具 Python 等动态语言的开发速度和 C/C 等编译型语言的性能与安…...

32个Java面试必考点-09(下)MySQL调优与最佳实践

详解 MySQL 下面来学习互联网行业使用最为广泛的关系型数据库 MySQL&#xff0c;它的知识点结构图如下所示。 常用 SQL 语句 对于手写常用 SQL 语句&#xff0c;没有什么特殊的技巧&#xff0c;根据所列的语句类型多做一些练习就好。 数据类型 要知道 MySQL 都提供哪些基本的…...

优思学院|精益管理如何判定哪些活动是增值或非增值?

“时间就是金钱”——这句老话我们都耳熟能详。但在工作中&#xff0c;我们真正从事的、对组织增加价值的活动有多少呢&#xff1f;我们常常认为自己的每一项任务都是维持运营的关键。然而&#xff0c;当我们从精益管理的视角进行分析&#xff0c;可能会惊讶地发现&#xff0c;…...

详解操作系统各章大题汇总(死锁资源分配+银行家+进程的PV操作+实时调度+逻辑地址->物理地址+页面置换算法+磁盘调度算法)

文章目录 第三章&#xff1a;死锁资源分配图例一例二 第三章&#xff1a;银行家算法第四章&#xff1a;进程的同步与互斥做题步骤PV操作的代码小心容易和读者写者混 1.交通问题&#xff08;类似读者写者&#xff09;分析代码 2.缓冲区问题&#xff08;第二个缓冲区是复制缓冲区…...

用ASM HEMT模型提取GaN器件的参数

标题&#xff1a;Physics-Based Multi-Bias RF Large-Signal GaNHEMT Modeling and Parameter Extraction Flow (JEDS 17年) 模型描述 该模型的核心是对表面势&#xff08;ψ&#xff09;及其随施加的栅极电压&#xff08;Vg&#xff09;和漏极电压&#xff08;Vd&#xff09…...

github ssh ssh-keygen

生成和使用 SSH 密钥对是一种安全的身份验证方式&#xff0c;用于在你的本地系统和 GitHub 之间进行身份验证。以下是在 GitHub 上生成和使用 SSH 密钥对的基本步骤&#xff1a; 1. 生成 SSH 密钥对 在命令行中执行以下命令来生成 SSH 密钥对&#xff1a; ssh-keygen -C &q…...

手把手教你用Matlab Simulink搭建闭环Buck电路:从PID调参到负载突变分析

从零构建闭环Buck电路&#xff1a;Simulink实战与PID调参全解析 电力电子工程师的日常工作中&#xff0c;Buck降压电路的设计与调试是基础中的基础。但真正让一个新手头疼的&#xff0c;往往不是电路拓扑本身&#xff0c;而是如何通过仿真快速验证设计&#xff0c;特别是当引入…...

Beekeeper Studio:现代跨平台数据库管理工具的技术架构与实战应用

Beekeeper Studio&#xff1a;现代跨平台数据库管理工具的技术架构与实战应用 【免费下载链接】beekeeper-studio beekeeper-studio/beekeeper-studio: Beekeeper Studio 是一款开源的跨平台数据库客户端工具&#xff0c;支持多种数据库&#xff08;如MySQL, PostgreSQL, SQLit…...

告别卡顿!用UE5关卡流送(Level Streaming)优化你的开放世界游戏性能

告别卡顿&#xff01;用UE5关卡流送&#xff08;Level Streaming&#xff09;优化你的开放世界游戏性能 当玩家在广袤的开放世界中自由探索时&#xff0c;没有什么比突然的加载卡顿或帧率骤降更能破坏沉浸感了。作为UE5开发者&#xff0c;我们常常面临一个两难选择&#xff1a;…...

Gradio项目快速公网演示:除了share=True,你还有这几种轻量级内网穿透方案

Gradio项目快速公网演示&#xff1a;5种轻量级内网穿透方案横向评测 当你开发了一个酷炫的机器学习模型演示&#xff0c;或是精心设计的数据可视化界面&#xff0c;最迫切的需求往往是如何快速分享给同事或客户。Gradio的shareTrue参数可能是大多数开发者首先想到的方案&#x…...

【紧急预警】Mojo nightly build已悄然移除PyModule::import() API!立即备份旧版+迁移至PyO3 0.21+手动GC管理方案(附自动化迁移脚本)

第一章&#xff1a;【紧急预警】Mojo nightly build已悄然移除PyModule::import() API&#xff01;立即备份旧版迁移至PyO3 0.21手动GC管理方案&#xff08;附自动化迁移脚本&#xff09;Mojo nightly build v2024.06.12 起&#xff0c;PyModule::import() 已被彻底移除&#x…...

新手指南:掌握3MF格式实现Blender高效3D打印工作流

新手指南&#xff1a;掌握3MF格式实现Blender高效3D打印工作流 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 副标题&#xff1a;从格式解析到自动化处理的完整应用方案…...

语义分割竞赛必备:5种Loss函数组合效果对比(含Dice+Focal Loss调参指南)

语义分割竞赛进阶&#xff1a;5种损失函数组合实战评测与调参策略 在Kaggle等数据竞赛中&#xff0c;语义分割任务的性能提升往往取决于损失函数的巧妙选择与组合。不同于常规分类任务&#xff0c;多类别像素级预测需要处理极端类别不平衡、边界模糊等独特挑战。本文将深入剖析…...

嵌入式软件发中AI技术及工具的应用

嵌入式软件开发中的人工智能技术应用与辅助方法详述及未来展望 引言 人工智能正从“被嵌入到终端设备”的单向角色&#xff0c;逐步演变为“赋能开发过程本身”的双向驱动力。在嵌入式软件开发领域&#xff0c;AI不仅让设备更智能&#xff0c;更在深刻改变着开发者的工作方式—…...

分子构象采样新范式:CREST工具解决药物研发核心挑战

分子构象采样新范式&#xff1a;CREST工具解决药物研发核心挑战 【免费下载链接】crest Conformer-Rotamer Ensemble Sampling Tool based on the xtb Semiempirical Extended Tight-Binding Program Package 项目地址: https://gitcode.com/gh_mirrors/crest/crest 在药…...

KISTLER 1631C3 连接电缆

KISTLER 1631C3&#xff08;奇石乐&#xff09;是压电式传感器专用高绝缘单芯同轴连接电缆&#xff0c;3 米&#xff0c;绿色 PFA 材质&#xff0c;KIAG 10-32 公转 BNC 公。一、型号含义1631C&#xff1a;系列&#xff08;高绝缘、低噪声、单芯同轴&#xff09;3&#xff1a;长…...