关于微信小程序rich-text中图片宽度超出范围解决办法

news2024/11/23 11:14:45

问题描述:写一个富文本展示页面时发现一个问题,就是图片宽度超出范围,本能反应是给图片设置一个最大宽度,这里发现不可行。然后又使用正则追加样式还是不行。

// 使用正则提取html里面的图片设置图片最大宽度为100%
res[1].data[0].f_content =res[1].data[0].f_content.replace(/<img[^>]*>/gi, function (match, capture) {
			return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 
            'style="max-width:100%;height:auto;"') // 替换style
				})

解决方法

这里可以利用属性选择器,给img的src宽度100%

.content_richText [src]{
		max-width: 100%;
	}

解决:
        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1022121.html

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

相关文章

netty-HashedWheelTimer源码解析

一、案例分析 public void testExecutionOnTaskExecutor() throws InterruptedException {int timeout 10;final CountDownLatch latch new CountDownLatch(1);final CountDownLatch timeoutLatch new CountDownLatch(1);Executor executor new Executor() {Overridepublic…

用纯html写个个人简历!模版分享啦!!!

用纯html写个个人简历&#xff01;首先得先找个模板&#xff01; 一个优秀模板所应该具有的素质&#xff1f; 简单&#xff1f; 仅仅一个html页面&#xff0c;完全没有乱七八糟&#xff0c;保证学的明明白白。 漂亮&#xff1f; 该有的内容一个不少&#xff01; 个人照片&a…

零基础Linux_6(开发工具_下)函数库链接+Makefile+实现进度条+Git

目录 1. 函数库&#xff08;链接&#xff09; 1.1 链接 1.2 动态库与静态库 2. makefile 2.1 项目构建 2.2 Makefile的概念 2.3 Makefile的编写 2.4 .PHONY定义伪目标 ACM 时间 3.实现进度条&#xff08;缓冲区&#xff09; 3.1 缓冲区的概念 3.2 实现一个简易 &q…

全网最详细的OSPF原理总结,看这篇就够了!

大家好&#xff0c;我的网工朋友。 OSPF是一种基于链路状态的路由协议&#xff0c;也是专为 IP 开发的路由协议&#xff0c;直接运行在 IP 层上面。它从设计上保证了无路由环路。除此之外&#xff0c;IS-IS也是很常见的链路状态协议。 为什么会出现OSPF&#xff1f; 作为目前…

欧拉操作系统在线安装mysql8数据库并用navicat premium远程连接

网上太多安装教程&#xff0c;但是没有一个教程能够一站式解决安装问题&#xff0c;而我不一样&#xff0c;我写的每一个博客&#xff0c;都是我自己试验过很多次&#xff0c;能够确保一站式解决&#xff0c;才会发上去&#xff0c;希望能够帮助到大家 第一步&#xff1a;升级…

Linux工具(一)

前言&#xff1a;Linux是一个开源的操作系统&#xff0c;它拥有庞大而活跃的开发社区&#xff0c;为用户提供了丰富多样的工具和应用程序。这些工具不仅适用于系统管理员和开发人员&#xff0c;也适用于普通用户&#xff0c;可以帮助他们完成各种任务&#xff0c;从简单的文件管…

爬虫 — Scrapy 框架安装问题

整理几个关于安装 Scrapy 框架时会遇到的问题及解决方法。 1、 pip install typing-extensions4.3.0 -i https://pypi.douban.com/simple 2、 pip install pyOpenSSL22.0 -i https://pypi.douban.com/simple 3、 pip install cryptography36.0.2 -i https://pypi.douban.com/s…

基于GBDT+Tkinter+穷举法按排队时间预测最优路径的智能导航推荐系统——机器学习算法应用(含Python工程源码)+数据集(四)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境Pycharm 环境Scikit-learnt 模块实现1. 数据预处理2. 客流预测3. 百度地图API调用4. GUI界面设计5. 路径规划6. 智能推荐 系统测试1. 训练准确率2. 测试效果3. 程序应用 相关其它博客工程源代码下载其它资料下载 …

如何在云服务器上成功安装MongoDB数据库并用Python连接(问题及解决方法)

最近购买了1台腾讯云轻量服务器做测试&#xff0c;想在上面安装MongoDB数据库。但安装过程并不顺利&#xff0c;遇到了几个问题。本文记录一下安装过程及遇到的问题和解决方法。 一、软件下载地址&#xff1a; 1.直接打开MongoDB官网&#xff1a;https://www.mongodb.com/ …

2023 Google 开发者大会:助力传承和弘扬传统文化

文章目录 前言一、关于 Google 开发者大会1.1、什么是 Google 开发者大会&#xff1f;1.2、CSDN 上线 2023 Google 开发者大会专题页 二、敦煌深厚的艺术沉淀2.1、“云想衣裳花想容”&#xff1f;2.2、“大漠孤烟直&#xff0c;长河落日圆” 三、传统文化赋予现代艺术设计灵感四…

1.IAR-8051安装

新版安装教程&#xff1a;IAR EW for 8051 简介与安装 新版软件zhuce&#xff1a;IAR EW for 8051 软件注册 - 知乎 这个新版的我也放到网盘里面了&#xff0c;自己自行选择安装 一、下载IAR-8051 链接&#xff1a;https://pan.baidu.com/s/1mYwSQvSjAiSzltrEbK3yAw?pwd43cd …

IPV4和IPV6,公网IP和私有IP有什么区别?

文章目录 1、什么是IP地址&#xff1f;1.1、背景1.2、交换机1.3、局域网1.4、广域网1.5、ISP 互联网服务提供商 2、IPV42.1、什么是IPV4&#xff1f;2.2、IPV4的组成2.3、NAT 网络地址转换2.4、端口映射 3、公网IP和私有IP4、IPV6 1、什么是IP地址&#xff1f; 1.1、背景 一台…

接口调用三种方式

创建服务端 一个controller&#xff0c;一个启动类&#xff0c;配置端口 controller import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;RestController public class ServerController {Req…

uniapp开发h5 遇到一个刻度尺的需求 实现记录

先上最终实现图 实现这个功能使用的是github上找的一个库 叫slide-ruler 地址 实现思路&#xff1a; 第一步&#xff1a;在终端npm 下载这个依赖 第二步&#xff1a;新建一个刻度尺自定义组件&#xff0c;如果不是自定义组件会不生效&#xff0c;并且这个自定义组件里面放一…

用无代码搭建数据中台,竟做到如此丝滑

文章目录 需求背景系统介绍配置说明1 菜单导航2 系统自带组件导入页面&#xff08;1&#xff09;数据集成相关组件&#xff08;2&#xff09;数据服务相关组件 3 由系统组件路径添加页面&#xff08;1&#xff09;数据资产管理&#xff08;2&#xff09;数据标准管理&#xff0…

Hutool工具包:http客户端工具(使用教程)

目录 一、Hutool介绍 二、笔者的话 三、引入依赖 四、大致步骤 五、GET请求 5.1 代码 5.2 结果展示 六、POST请求 6.1 代码一&#xff08;Form Data类型参数&#xff09; 6.2 结果展示 6.3 代码二&#xff08;Form Data类型参数 - 含上传文件&#xff09; 6.4 结果…

idea设置项目启动的JVM运行内存大小

idea设置项目启动的JVM运行内存大小 场景 在开发当中&#xff0c;idea默认服务启动要占用1G内存。其实每个项目本地开发和调试的时候&#xff0c;根本不需要1G内存&#xff0c;200M左右足以 如果在微服务体系下&#xff0c;那效果更明显&#xff0c;相同的内存可以启动更多的…

Linux学习之Redis集群部署

Redis集群部署 准备集群环境 创建集群 # 准备集群环境--配置192.168.88.51(host51) [rootlocalhost ~]# yum install -y redis [roothost51 ~]# vim /etc/redis.conf bind 192.168.88.51 cluster-enabled yes cluster-config-file nodes-6379.conf cluster-node-timeout 5000…

Java web基础知识

Servlet Servlet是sun公司开发的动态web技术 sun在API中提供了一个接口叫做 Servlet &#xff0c;一个简单的Servlet 程序只需要完成两个步骤 编写一个实现了Servlet接口的类 把这个Java部署到web服务器中 一般来说把实现了Servlet接口的java程序叫做&#xff0c;Servlet 初步…

成功的海外网红营销:文化和价值观冲突的应对策略

随着全球数字化和社交媒体的崛起&#xff0c;海外网红营销已经成为企业推广产品和服务的一种重要方式。然而&#xff0c;这种全球性的营销活动也伴随着文化和价值观的多样性&#xff0c;容易导致潜在的冲突和误解。为了取得成功并避免不必要的争议&#xff0c;企业需要深入了解…