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;
		},

参考大佬

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于Vue+SpringBoot的教学过程管理系统

项目编号&#xff1a; S 054 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S054&#xff0c;文末获取源码。} 项目编号&#xff1a;S054&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2…

luceda ipkiss教程 40:获取版图中任意形状elements的面积

在ipkiss中&#xff0c;通过Polygon可以直接获取任意shape的面积&#xff1a; from si_fab import all as pdk import ipkiss3.all as i3 from shapely.geometry import Polygonclass Shape(i3.PCell):class Layout(i3.LayoutView):def _generate_elements(self, elems):elem…

如何申请GeoTrust通配符证书?

GeoTrust通配符证书可以保护一个域名下的所有子域名和所有下一级域名。这意味着&#xff0c;当您购买并安装了一个GeoTrust通配符证书后&#xff0c;您的主域名以及所有子域名都将得到SSL加密保护。这对于那些拥有多个子域名的网站来说&#xff0c;无疑是一种非常实用且高效的解…

实例解析关于兔鲜登录tab栏切换案例详细讲解!

文章目录 文章目录 效果图展示 整体制作的一个思路 代码展示 技术细节 小结 效果图展示 点击账户登录显示登录的模块&#xff0c;点击二维码登录显示二维码的模块 整体制作的一个思路 点击哪个模块哪个显示&#xff0c;另外一个模块让它隐藏即可&#xff01; 代码展示 <!…

创建vue项目:node.js下载安装、配置环境变量,下载安装cnpm,配置npm的目录、镜像,安装vue、搭建vue项目开发环境(保姆级教程一)

今天讲解 Windows 如何创建 vue 项目&#xff0c;搭建 vue 开发环境&#xff0c;这是这个系列的第一章&#xff0c;有什么问题请留言&#xff0c;请点赞收藏&#xff01;&#xff01;&#xff01; 文章目录 一、Vue简单介绍二、开始搭建1、安装node.js环境2、配置npm下载时的默…

三:爬虫-网络请求模块(下)

三&#xff1a;网络请求模块&#xff08;下&#xff09; 1.Requests模块&#xff1a; ​ Requests是用Python语言编写&#xff0c;基于urllib&#xff0c;采用 Apache2 Licensed开源协议的 HTTP 库&#xff0c;它比urllib更加的方便&#xff0c;可以节约我们大量的工作&#…

期末速成数据库极简版【查询】(2)

目录 select数据查询----表 【1】筛选列 【2】where简单查询 【3】top-n/distinct/排序的查询 【4】常用内置函数 常用日期函数 常用的字符串函数 【5】模糊查询 【6】表数据操作——增/删/改 插入 更新 删除 【7】数据汇总 聚合 分类 ​ &#x1f642;&#…

OpenCV-python下载安装和基本操作

文章目录 一、实验目的二、实验内容三、实验过程OpenCV-python的安装与配置python下载和环境配置PIP镜像安装Numpy安装openCV-python检验opencv安装是否成功 openCV-python的基本操作图像输入和展示以及写出openCV界面编程单窗口显示多图片鼠标事件键盘事件滑动条事件 四、实验…

科研神器:Vscode + latex+grammarly+github copilot

科研论文编写神器&#xff1a;Vscode latex grammarly github copilot 相信很多科研人都有使用latex排版及撰写论文的需求&#xff0c;我一开始使用的是在线编辑的overleaf&#xff0c;overleaf的优点是省事便捷&#xff0c;不用配置&#xff0c;并且支持版本回溯&#xff…

一对一互相聊天

服务端 package 一对一用户;import java.awt.BorderLayout; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Vector;…

换种方式开发软件

前 言 作为程序员&#xff0c;经常苦于项目交付&#xff0c;疲于应对各种需求&#xff0c;一路狂奔&#xff0c;很难有时间停下来思考与抽象&#xff0c;聊起来都是“累”&#xff1b;作为产品经理&#xff0c;最痛苦的莫过于梦醒之后无路可走&#xff0c;心里的苦只有自己知道…

【精】云HIS系统操作过程中常见问题及解决方法

云HIS系统使用和操作过程中常见问题及解决方法 1.门诊业务 &#xff08;1&#xff09;门诊医生如何查询往期病人&#xff1f; 答&#xff1a;点击门诊医生站左侧患者列表&#xff0c;在弹出的页面点击已诊分页&#xff0c;在搜索框输入患者姓名&#xff0c;在结果中找到对应…

【2021研电赛】基于EAIDK-310的云端互联无人驾驶系统

本作品介绍参与极术社区的有奖征集|分享研电赛作品扩大影响力&#xff0c;更有重磅电子产品免费领取! 参赛单位&#xff1a;上海理工大学 参赛队伍&#xff1a;你说的都是对的 指导老师&#xff1a;蒋全 参赛队员&#xff1a;童锐&#xff0c;邹祖奇&#xff0c;胡涛 获奖情况&…

亚马逊云科技re:Invent大会:RAG技术赋能企业AI应用的新纪元

在最新一届re:Invent大会中&#xff0c;亚马逊云科技的数据和人工智能副总裁Swami Sivasubramanian博士提出了一系列AI产品&#xff0c;其中RAG技术成为了企业构建生成式AI应用的重要选择。这种技术的实质是将向量数据库与大语言模型相结合&#xff0c;赋予大模型记忆的能力&am…

【译】虚拟线程:绝对优势

原文地址&#xff1a;Virtual Threads: A Definite Advantage 一、前言 深入了解虚拟线程如何提高应用程序的性能和可扩展性&#xff0c;同时将线程管理开销降到最低。 探索虚拟线程是一件很棒的事情&#xff0c;它是 Java 的一项强大功能&#xff0c;有望彻底改变多线程应用…

【星戈瑞】Sulfo-CY3 DBCO荧光光谱特性之吸收、发射光谱

Sulfo-CY3 DBCO的荧光光谱特性通常涵盖了其吸收和发射光谱。这些光谱特性是研究该染料在生物分子标记和成像中的应用时的参数。 吸收光谱&#xff1a; Sulfo-CY3 DBCO的吸收光谱通常显示了其在不同波长下吸收光的能力。典型情况下&#xff0c;Sulfo-CY3 DBCO的吸收峰位于可见光…

单向通信----一对一聊天

package 一对一聊天; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import …

CRM客户关系管理系统的主要功能有哪些?

我们都知道&#xff0c;CRM系统可以帮助企业加快业务增长。如果一个企业能提高业务效率、跨团队协作、有效管理客户、轻松共享和同步数据&#xff0c;那么企业竞争力将极大地提高。基于此&#xff0c;我们说说CRM客户关系管理系统的主要功能分析。 完整的CRM是什么样的&#x…

HarmonyOS开发(十):通知

1、通知概述 1.1、简介 应用可以通过通知接口发送通知消息&#xff0c;终端用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应用。 通知使用的的常见场景&#xff1a; 显示接收到的短消息、即使消息...显示应用推送消息显示当前正在进行的事件&#xff0c…

最常见的直流负载工作方式

直流负载工作方式是指在电力系统中&#xff0c;直流电源为负载提供电能的方式。在实际应用中&#xff0c;直流负载工作方式有很多种。 直接供电方式&#xff1a;这是最简单的直流负载工作方式&#xff0c;即直流电源直接为负载提供电能。这种方式适用于负载较小、对电源稳定性要…