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

ops/2024/10/21 0:11:21/

在微信小程序中,用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.ppmy.cn/ops/18946.html

相关文章

【OceanBase诊断调优】—— 4013 内存爆问题的排查

本文介绍 4013 内存爆问题的排查。 内存爆的类型 内存爆主要分为五类&#xff0c;可以通过关键词 OOPS 确定内存爆的类型。 内存爆的类型日志信息&#xff08;关键字为 [OOPS]&#xff09;SINGLE_ALLOC_SIZE_OVERFLOWsingle alloc size large than 4G is not allowed(alloc_…

MQ面试题

为什么要使用消息队列&#xff1f; 优点&#xff1a;解耦、异步、流量削峰 缺点&#xff1a;可用性降低、复杂性提高、一致性问题 为什么选择了RabbitMQ而不是其它的MQ&#xff1f; kafka是以吞吐量高而闻名&#xff0c;不过其数据稳定性一般&#xff0c;而且无法保证消息有…

建造者模式(装修公司装修套餐)

目录 定义 装修公司装修套餐 物料接⼝ 吊顶(ceiling) ⼀级顶 ⼆级顶 涂料(coat) 多乐⼠ ⽴邦 地板(floor) 德尔 圣象 地砖(tile) 东鹏 ⻢可波罗 代码实现 定义装修包接⼝ 装修包实现 建造者⽅法 测试验证 定义 建造者模式所完成的内容就是通过将多个简单对…

SQL 之 小技巧总结

一、如何查询一个字段数据中是否包含特定字符 eg&#xff1a;查看是否包含逗号&#xff08;“,”&#xff09; SELECT * FROM table_name WHERE column_name LIKE %,%;这里&#xff0c;% 是通配符&#xff0c;表示任意数量的任意字符。‘%,%’ 表示查询column_name中包含逗号…

flask_apscheduler 定时任务框架

简介 Flask_apscheduler是一个在Flask框架中使用的APScheduler库的扩展。APScheduler是一个用于调度任务的Python库&#xff0c;可以在指定的时间间隔调度函数、方法或任意可调用对象的执行。 Flask_apscheduler对APScheduler进行了集成&#xff0c;使得在Flask应用中可以简便…

Vue全局添加水印

1.创建warterMark.js /*水印配置*/ //声明 let watermark {} //水印配置 let setWatermark (str1, str2, str3) > {let id 1.23452384164.123412415// 移除水印 判断if (document.getElementById(id) ! null) {document.body.removeChild(document.getElementById(id)…

Web3D在电商行业的应用:开启沉浸式购物新纪元!

随着科技的不断进步&#xff0c;电子商务领域也在不断探索新的技术手段&#xff0c;以提供更加优质、便捷的购物体验。其中&#xff0c;Web3D技术的兴起&#xff0c;为电子商务带来了革命性的变化&#xff0c;开启了沉浸式购物的新纪元。 Web3D技术是一种在网页上呈现三维立体图…

计算机网络实验——学习记录五(TCP协议2)

一、TCP协议重传机制 TCP协议是一种面向连接、可靠的传输层协议。为了保证数据的可靠传输&#xff0c;TCP采用数据包重传的机制来应对网络传输过程中可能出现的丢包、错包和乱序等问题。 TCP协议的重传包括超时重传、快速重传、带选择确认SACK的重传和重复SACK重传四种。 二、…