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

在微信小程序中,用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://xiahunao.cn/news/2980890.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

easyx库的学习(鼠标信息)

前言 本次博客是作为介绍easyx库的使用&#xff0c;最好是直接代码打到底&#xff0c;然后看效果即可 代码 int main() {initgraph(640, 480, EX_SHOWCONSOLE|EX_DBLCLKS);setbkcolor(RGB(231, 114, 227));cleardevice();//定义消息结构体ExMessage msg { 0 };//获取消息wh…

6.2 整合MongoDB

6.2 整合MongoDB 1. MongoDB简介2. MongoDB安装2.1 下载2.2 配置MongoDB2.3 MongoDB的启动和关闭1. 启动MongoDB2. 关闭MogoDB 2.4 安全管理 3. 整合SpringBoot3.1 依赖3.2 MongoTemplate使用3.3 测试1. 新增2. 查询3. 删除 *************************************************…

每天学习一个Linux命令之stat

每天学习一个Linux命令之stat 简介 在Linux系统中&#xff0c;stat命令用于显示文件的详细信息&#xff0c;包括文件的设备号、文件类型、权限、链接数、所有者、组、大小、时间戳等。stat命令是一个非常常用的命令&#xff0c;能够帮助我们了解文件的属性和状态。本篇博客将介…

uniapp 引用组件后 不起作用 无效果 不显示

根据uniapp官方文档easycom组件规范 只要组件安装在项目的components目录下或uni_modules目录下&#xff0c;并符合components/组件名称/组件名称.(vue|uvue)目录结构&#xff08;注意&#xff1a;当同时存在vue和uvue时&#xff0c;uni-app 项目优先使用 vue 文件&#xff0c;…

用于割草机器人,商用服务型机器人的陀螺仪

介绍一款EPSON推出适用于割草机器人&#xff0c;商用服务型机器人的高精度陀螺仪模组GGPM61&#xff0c;具体型号为GGPM61-C01。模组GGPM61是一款基于QMEMS传感器的低成本航向角输出的传感器模组&#xff0c;它可以输出加速度、角速度及姿态角等信息&#xff0c;为控制机器人运…

【目标检测】FPN特征金字塔完整流程详解

学习视频&#xff1a;1.1.2 FPN结构详解 对比 可以看到FPN是自上而下、自下而上并且可以进行多尺度特征融合的的层级结构。 具体结构 1x1 conv: 对通道数进行调整&#xff0c;不同大小的特征图通道数不同&#xff0c;越高层次的特征图通道数越大&#xff0c;论文中使用256个1…

在 Windows 系统上彻底卸载 TeamViewer 软件

在 Windows 系统上彻底卸载 TeamViewer 软件 References 免费版仅供个人使用 您的会话将在 5 分钟后终止 Close TeamViewer by locating the TeamViewer icon in the system tray, right click and “Exit TeamViewer”. Right click Windows start menu then Control Panel -…

[Linux][多线程][三][条件变量][生产者消费者模型][基于BlockingQueue的生产者消费者模型]详细讲解

目录 1.线程同步1.同步概念与竞态条件2.条件变量 2.条件变量函数1.初始化 -- pthread_cond_init()2.销毁 -- pthread_cond_destroy()3.等待条件变量 -- pthread_cond_wait()4.唤醒等待5.为什么pthread_cond_wait()需要互斥量&#xff1f;6.错误的程序设计7.条件变量使用规范 3.…

2024 OceanBase 开发者大会:OceanBase 4.3正式发布,打造PB级实时分析数据库

4月20日&#xff0c;2024 OceanBase开发者大会盛大召开&#xff0c;吸引了50余位业界知名的数据库专家和爱好者&#xff0c;以及来自全国各地的近600名开发者齐聚一堂。他们围绕一体化、多模、TP与AP融合等前沿技术趋势展开深入讨论&#xff0c;分享场景探索的经验和最佳实践&a…

金融风控信用评分卡建模(Kaggle give me credit数据集)

1 数据预处理数据 数据来源于Kaggle的Give Me Some Credit&#xff0c;包括25万条个人财务情况的样本数据 1.1 导包读数据 import pandas as pd import numpy as np import matplotlib.pyplot as plt from sklearn.ensemble import RandomForestRegressor import seaborn as …

换脸插件升级导致SDWebUI无法启动cannot import name ‘Undefined‘ from ‘pydantic.fields‘

今天在一台新的机器环境装了SDWEBUI&#xff0c;都使用最新的版本&#xff0c;升级了下换脸的插件&#xff0c;于是乎启动崩溃了。错误如下 Launching Web UI with arguments: --listen --skip-torch-cuda-test --disable-nan-check --skip-version-check --skip-python-versi…

C++信息学奥赛 数据结构认识

数据结构 1.1数据结构分类 1.2基本数据类型 1.3数字编码 1.4字符编码 1.1数据结构分类 数据结构如同一副稳固而多样的框架。为数据的有序组织提供了蓝图&#xff0c;算法得以在此基础上生动起来。 常用的数据结构包括哪些 &#xff0c; &#xff0c; &…

Django中的事务

1 开启全局的事务 DATABASES {default: {ENGINE: django.db.backends.mysql, # 使用mysql数据库NAME: tracerbackend, # 要连接的数据库USER: root, # 链接数据库的用于名PASSWORD: 123456, # 链接数据库的用于名HOST: 192.168.1.200, # mysql服务监听的ipPORT: 3306, …

2024新算法爱情进化算法(LEA)和经典灰狼优化器(GWO)进行无人机三维路径规划设计实验

简介&#xff1a; 2024新算法爱情进化算法&#xff08;LEA&#xff09;和经典灰狼优化器&#xff08;GWO&#xff09;进行无人机三维路径规划设计实验。 无人机三维路径规划的重要意义在于确保飞行安全、优化飞行路线以节省时间和能源消耗&#xff0c;并使无人机能够适应复杂环…

薄板样条插值TPS原理以及torch和opencv实现

薄板样条插值TPS原理以及torch和opencv实现 1、薄板样条插值TPS原理概述原理以及公式推导2、torch实现3、opencv实现1、薄板样条插值TPS原理 概述 薄板样条(Thin Plate Spline),简称TPS,是一种插值方法,可找到通过所有给定点的“最小弯曲”光滑曲面。因为它一般都是基于…

跟着野火从零开始手搓emWin(1)初识emWin

PS&#xff1a;在嵌入式领域&#xff0c;本人认为QT的应用范围和性能几乎吊打市面上所有的GUI工具。但是本人之所以学习emWin&#xff0c;是因为自己有些微不足道的小想法&#xff0c;需要通过它来实现。但是QT有点吃硬件的配置&#xff0c;为了MCU专门发行的QT我又懒得去弄&am…

vscode将本地服务转发到外网地址访问

示例中将本地的5500端口&#xff0c;用vscode进行端口转发&#xff0c;在外网地址访问服务 要转发的端口 转发端口 点击转发端口 输入要转发的端口&#xff0c;按下回车 Enter 点击允许&#xff0c;弹出确认界面后点击打开 转发端口已经成功配置上&#xff0c;右键可见性…

四川赢涟电子商务有限公司是做什么的?

在当今数字化浪潮中&#xff0c;电子商务以其独特的魅力和无限潜力&#xff0c;成为了商业领域的新宠。而在这股潮流中&#xff0c;四川赢涟电子商务有限公司以其对抖音电商的深入研究和专业服务&#xff0c;成为了行业内的佼佼者。 一、深耕抖音&#xff0c;领跑电商新赛道 四…

centos 安装配置文件中心 nacos2.2.3 稳定版

安装mysql 8 参考文章 centos7搭建mysql5.6 && mysql 8.0_centos7 mysql5.6-CSDN博客 安装 jdk 17 官网下载 对应的版本 Java Downloads | Oracle wget https://download.java.net/java/GA/jdk17.0.2/dfd4a8d0985749f896bed50d7138ee7f/8/GPL/openjdk-17.0.2_l…

(5)步态识别论文研读——GaitDAN:基于对抗域适应的跨视角步态识别

GaitDAN: Cross-view Gait Recognition via Adversarial Domain Adaptation | IEEE Journals & Magazine | IEEE Xplore GaitDAN: Cross-view Gait Recognition via Adversarial Domain Adaptation 基于对抗与适应 摘要&#xff1a;视角变化导致步态外观存在显着差异。因…