小程序 rich-text 解析富文本 图片过大时如何自适应?

news/2024/5/10 1:49:49

在微信小程序中,用rich-text 解析后端返回的数据,当图片尺寸太大时,会溢出屏幕,导致横向出现滚动
在这里插入图片描述
查看富文本代码 图片是用 <img 标签,所以写个正则匹配一下图片标签,手动加上样式即可

  // content 为后端返回的富文本内容formatImg(content) {if (!content) return '';const regex = /<img[^>]*>/g;content = content.replace(regex, function (match) {return match.replace('>', ' style="max-width:100%;height:auto;">');});return content;},

首先通过正则表达式 /<img[^>]*>/g 匹配所有的 img 标签。然后通过 replace 方法对每个匹配到的 img 标签添加自适应样式

在这里插入图片描述
完美解决!!


http://www.mrgr.cn/p/37770777

相关文章

界面组件DevExpress Blazor UI v23.2 - 支持.NET 8、全新的项目模版

DevExpress Blazor UI组件使用了C#为Blazor Server和Blazor WebAssembly创建高影响力的用户体验&#xff0c;这个UI自建库提供了一套全面的原生Blazor UI组件&#xff08;包括Pivot Grid、调度程序、图表、数据编辑器和报表等&#xff09;。 DevExpress Blazor控件目前已经升级…

Unity入门实践小项目

必备知识点 必备知识点——场景切换和游戏退出 必备知识点——鼠标隐藏锁定相关 必备知识点——随机数和Unity自带委托 必备知识点——模型资源的导入 实践项目 需求分析 UML类图 代码和资源导入 开始场景 场景装饰 拖入模型和添加脚本让场景动起来 开始界面 先用自己写的GUI…

ios上架驳回记录

原文 Review Environment Submission ID: b097ac72-b1de-4abe-b5a9-81f507bb7e64 Review date: April 25, 2024 Version reviewed: 1.2.3 Guideline 4.3(a) - Design - Spam We noticed your app shares a similar binary, metadata, and/or concept as apps submitted to th…

卡诺图学习

目录1、最小项2、最小项与卡诺图之间转换卡诺图根据最小项填写卡诺图根据逻辑函数填写卡诺图3、卡诺图化简方法 1、最小项逻辑函数表达式可以使用其最小项相加来表示最小项的定义 一个函数的某个乘积项包含了函数的全部变量,其中每个变量都以原变量或反变量的形式出现,且仅出…

SpringBoot---------整合Redis

目录 第一步&#xff1a;引入依赖 第二步&#xff1a;配置Redis信息 第三步&#xff1a;选择Spring Data Redis进行操作Redis数据库 ①操作String类型数据&#xff08;用的少&#xff09; ②操作Object类型数据&#xff08;重要&#xff01;&#xff01;&#xff01;&#x…

jdk版本冲突,java.lang.UnsupportedClassVersionError: JVMCFRE003

主要是编辑器所用的jdk版本和项目用的不一致导致的&#xff0c;虽然编译通过了&#xff0c;但是运行是会报错 选好后点击Apply点击ok&#xff0c;然后重新编译一遍项目就可以了

ESP32引脚笔记

ESP32引脚笔记 ESP32建议使用的引脚 可参考下图Euno开发板引脚模拟输入可采用: 32、33、34、35、36、39 数字输出可采用: 上图右侧引脚 SPI : mosi-23, miso-19, clk-18, cs-5 IIC: scl-22, sda-21仅输入引脚 GPIO34~39是GPIs–仅输入的管脚。这些引脚没有内部上拉或下拉电阻。…

pip成功安装gdal的whl文件后,PyCharm仍报错No module named ‘osgeo’

在根据网上的教程,成功pip install 对应的whl文件后,发现PyCharm仍然显示无法调用osgeo。 出现这样的问题,首先关注自己使用的环境,例如我使用的环境是(见下图)但当我打算卸载gdal库后,发现gdal安装的环境地址和我使用的环境地址不同(如下图)啊,原来是安装gdal的环境…

池化整合多元数据库,zData X 一体机助力证券公司IT基础架构革新

引言 近期&#xff0c;云和恩墨 zData X 多元数据库一体机&#xff08;以下简称 zData X&#xff09;在某证券公司的OA、短信和CRM业务系统中成功上线&#xff0c;标志着其IT基础架构完成从集中式存储向池化高性能分布式存储的转变。zData X 成功整合了该证券公司使用的达梦、O…

12 c++版本的坦克大战

前言 呵呵 这大概是 大学里面的 c 贪吃蛇了吧 有一些 面向对象的理解, 但是不多 这里 具体的实现 就不赘述, 仅仅是 发一下代码 以及 具体的使用 坦克大战 #include<iostream> #include<windows.h> #include<conio.h> #include<ctime> #include…

HarmonyOS ArkUI实战开发—状态管理

一、状态管理 在声明式UI编程框架中&#xff0c;UI是程序状态的运行结果&#xff0c;用户构建了一个UI模型&#xff0c;其中应用的运行时的状态是参数。当参数改变时&#xff0c;UI作为返回结果&#xff0c;也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染&…

计算机Windows系统优化小知识

本文涉及计算机Windows系统优化小知识,介绍了注册表、虚拟内存、常用优化工具目录目录什么是注册表优化优化工具什么是注册表注册表是保存所有系统设置数据的存储器。注册表保存了 Windows 运行所需的各种参数和设置,以及应用程序相关的所有信息。从 Windows启动开始,到用户…

CUDA和CUDNN版本切换

介绍了cuda和cudnn版本切换的方法,以及设置环境变量的坑0 背景 在用不同框架做深度学习时,难免会遇到需要不同版本的cuda和cudnn版本的情况,如果把原来版本的卸载掉重新安装新版本,则会影响其它框架的使用,最好的方法是在主机上安装多个版本的cuda和cudnn,需要用到哪种就…

用Python将原始边列表转换为邻接矩阵

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在图论和网络分析中&#xff0c;图是一种非常重要的数据结构&#xff0c;它由节点&#xff…

计算机DIY之接驳线缆

介绍计算机DIY过程中接驳线缆相关知识,CPU供电、主板主供电、显卡供电、SATA供电、大4pin供电、主板接驳、前面板接驳目录目录 接驳线缆 CPU供电: 主板主供电 显卡供电 SATA供电 大4pin供电 主板接驳 前面板接驳接驳线缆电源插头里还有3条ATX电源专有的线,一条绿色线…

【继承和多态】

闭上眼睛&#xff0c;什么都不听.............................................................................................................. 文章目录 前言 一、【继承】 1.1【继承的概念】 1.2【 继承的定义】 1.2.1【定义格式】 1.2.2【继承关系和访问限定符】 1.2…

硬盘保存及维护基本常识

介绍硬盘使用寿命、硬盘供电、硬盘保存相关小知识点目录目录 硬盘使用寿命简介 硬盘供电简介 硬盘保存简介硬盘使用寿命简介硬盘在连续使用3-4年后就需要注意了(一般为质保期时间后一点), 5-6年后就需要更换硬盘了. 五年左右的时候留意更换机械硬盘,如果不是特备重要的数据,可…

使用restful请求华三模拟器上的设备接口数据

一、resful介绍 RESTful采用C/S模型。RESTful客户端为使用Python、Ruby或Java等编程语言开发出的RESTful客户端程序或脚本。RESTful服务器为网络设备。通过RESTful功能配置和维护设备的过程为: (1) 客户端向服务器发送HTTP/HTTPS请求报文,通过HTTP的方法来操作指定的REST…

芯科SiWx917学习笔记:1-测试Out of Box Demo

实验目的:测试Out of Box Demo 实验环境:Simplicity Studio V5 实验器材:Wireless Starter Kit Mainboard (BRD4002A Rev A06) + SiWG917 Single Band Wi-Fi and BLE 8MB Flash Radio Board (BRD4338A Rev A01) 实验开始: 1. 新建工程:在demos中找到Out of Box Demo(SoC) …

HTML批量文件上传方案——图像预览方式

作者:私语茶馆 1.HTML多文件上传的关键方案 多文件上传包括:文件有效性校验,文件预览、存储和进度展示多个方面,本章节介绍的是文件预览的实现方案。 2.文件上传前预览 2.1.效果 选择文件前: 选择文件后: 2.2.CSS文件代码 StorageCenter.css代码 html {font-family:…