uniapp里 rich-text 里的img图片如何控制最大宽度

uniapp里的富文本展示的时候,要控制里面的图片的最大宽度;

用下面的方法字符串替换,给img标签加个内联样式

html 复制代码
<rich-text :nodes="processedDetail(product.product_contents)"></rich-text>
javascript 复制代码
	//处理富文本里的图片宽度限制的样式
	processedDetail(html) {
			if(!html){
				return '';
			}
		// 处理方法1: 强制替换所有图片样式
		  html = html.replace(/<img[^>]*>/g, (imgTag) => {
			// 移除 width 和 height 属性
			imgTag = imgTag.replace(/(width|height)=["'][^"']*["']/g, '');
			
			// 处理 style 属性
			if (imgTag.includes('style=')) {
			  // 移除原有的 width/height 样式,添加 max-width
			  imgTag = imgTag.replace(/style=["']([^"']*)["']/, (match, style) => {
				style = style.replace(/(width|height|max-width)[^;]*;?/g, '');
				return `style="${style}max-width: 100% !important; height: auto !important; display: block;"`;
			  });
			} else {
			  // 没有 style 属性,直接添加
			  imgTag = imgTag.replace('<img', '<img style="max-width: 100% !important; height: auto !important; display: block;"');
			}
			
			return imgTag;
		  });
		  
		   return html;
		
	}
相关推荐
毕设源码-郭学长21 小时前
【开题答辩全过程】以 基于uni-app的维修上门服务小程序设计与实现为例,包含答辩的问题和答案
uni-app
xiaohe060121 小时前
📦 Uni ECharts 是如何使用定制 echarts 的?一篇文章轻松掌握!
vue.js·uni-app·echarts
Front思1 天前
uniapp实现物流节点
uni-app
赵庆明老师1 天前
uniapp 微信小程序页面JS模板
javascript·微信小程序·uni-app
熬耶1 天前
uniapp 简单实现列表左滑操作
uni-app
小白学过的代码1 天前
UniApp 引入 Cesium 开发: RenderJS 避坑
uni-app
jingling5551 天前
uni-app 安卓端完美接入卫星地图:解决图层缺失与层级过高难题
android·前端·javascript·uni-app
2501_915918412 天前
iOS 开发中证书创建与管理中的常见问题
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张2 天前
IOScer 开发环境证书包括哪些,证书、描述文件与 App ID 的协同管理实践
android·ios·小程序·https·uni-app·iphone·webview
天府之绝2 天前
Uniapp App(Android)端 非媒体文件的选择、上传、下载、查看功能
uni-app