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;
		
	}
相关推荐
游戏开发爱好者85 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106327 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106327 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息9 小时前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
“负拾捌”9 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
局外人LZ1 天前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
前端呆头鹅1 天前
Websocket使用方案详解(uniapp版)
websocket·网络协议·uni-app
浮桥1 天前
uniapp+h5 公众号实现分享海报绘制
uni-app·notepad++
2501_916007471 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview