当前位置: 首页 > 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/news/160608.html

相关文章:

  • 微信小程序: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
  • 《异常检测——从经典算法到深度学习》24 用于单变量时间序列异常检测的端到端基准套件
  • Chapter 7. Congestion Management in Ethernet Storage Networks以太网存储网络的拥塞管理 - 1
  • Cocos Creator加入图片没有被识别
  • 【算法】约瑟夫环
  • Audacity降噪消除视频中杂音
  • 面试操作系统八股文五问五答第一期
  • OSI七层模型与TCP/IP四层模型
  • 《形式语言与自动机理论(第4版)》笔记(二)
  • elment-ui部分ui组件在移动端也能实现自适应
  • Altair推出 Altair RapidMiner 2023 平台,提供生成式 AI 功能