当前位置: 首页 > article >正文

uniapp使用v-html调用接口,富文本图片 视频自适应大小

前端获取到后台数据 不做处理 就会出现下面问题 图片 视频超出视图显示不全

请添加图片描述
处理

//info 是富文本
<view v-if='info' v-html='replaceWhite(info)'></view>

调用下面方法

replaceWhite(html) { // 处理富文本默认图片,视频大小
			let newContent = html.replace(/<video[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			}).replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<video/gi,
				'<video style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"').replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},

参考大佬

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!


http://www.kler.cn/a/160608.html

相关文章:

  • 信捷 PLC C语言 POU 指示灯交替灭0.5秒亮0.5秒(保持型定时器)
  • WPF中的ResizeMode
  • 【webrtc】 RTP 中的 MID(Media Stream Identifier)
  • 网络安全-Linux基础(bash脚本)
  • C 语言标准库 - <errno.h>
  • 【入门篇】A+B Problem——多语言版
  • 微信小程序:chooseimage从本地相册选择图片或使用相机拍照
  • DAPP开发【06】nodejs安装与npm路径更换
  • NDK交叉编译工具链使用教程
  • 日常开发日志
  • Shopify二次开发之五:元字段(Metafields)
  • 2023年山东省职业院校技能大赛信息安全管理与评估二三阶段样题
  • nodejs微信小程序+python+PHP新闻发布系统的设计与实现-计算机毕业设计推荐
  • prometheus|云原生|轻型日志收集系统loki+promtail的部署说明
  • 什么是高防IP,高防IP该如何选择。
  • Stable Diffusion AI绘画系列【18】:东方巨龙,威武霸气
  • 直播录屏软件哪个好?这3款软件请你收好
  • 简单使用selenium抓取微博热搜话题存储进Excel表格中
  • TTS声音合成:paddlespeech、sherpa-onnx、coqui-ai
  • 机器学习笔记 - 如何在Python中对网格和点云进行体素化?
  • 【CSP】202209-1_如此编码Python实现
  • 2022年第十一届数学建模国际赛小美赛B题序列的遗传过程解题全过程文档及程序
  • 有关thingsboard中 api的 jwt研究
  • 利用JavaFX生成验证码图片
  • mysql服务日志打印,时区不对的问题
  • 【C语言】7-38 吉老师的回归 分数 15