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.mzph.cn/news/210926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nestjs联合Typeorm操作Mysql数据库

创建项目 // 安装脚手架(只需要安装一次,因为这个是全局的) npm i -g nestjs/cli // 创建项目 nest new project-name // (该过程有个选择包管理工具的,我选的yarn)启动项目 yarn run start:dev // 可以在浏览器访问localhost:3000 输出helloWorld安装typeorm,mysql2和nestj…

蓝桥小白赛1

&#x1f469;‍&#x1f3eb; 地址 1. 蘑菇炸弹 &#x1f469;‍&#x1f3eb; 蘑菇炸弹 &#x1f389; AC code import java.util.Scanner;public class Main {public static void main(String[] args){Scanner sc new Scanner(System.in);int n sc.nextInt();int[] a …

d8week17

Week7 lec17 TVD去asscess model &#xff08;本质 距离加权平均&#xff09;text 11.2A New Statistic: The Distance between Two Distributions text-11.11.1 数据拿到手&#xff0c;套路操作 -- 看hist分布2 total variation distance lec18lec19 lec17 TVD去asscess model…

使用NCNN在华为M5部署Yolov5

使用NCNN在华为M5平板部署Yolov5 一、NCNN二、下载解压NCNN三、下载ncnn-android-yolov5工程四、下载Android Studio[前提已经配置了jdk版本]1、安装NDK、Cmske&#xff0c;这个必须要安装&#xff0c;2、安装Android 五、构建工程六、修改源码七、重新ysnc project八、安装APP…

MySQL深入——8

Order by语句是如何工作的&#xff1f; 首先我们来创建一个表 CREATE TABLE t (id int(11) NOT NULL,city varchar(16) NOT NULL,name varchar(16) NOT NULL,age int(11) NOT NULL,addr varchar(128) DEFAULT NULL,PRIMARY KEY (id),KEY city (city) ) ENGINEInnoDB; 全字段…

SQL命令---删除数据表

介绍 使用sql语句实现删除数据表。 命令 drop table 表名;

Python实战演练之python实现神经网络模型算法

python实现神经网络模型算法 今天&#xff0c;厾罗和大家分享用Python实现神经网络模型算法&#xff0c;仅用于技术学习交流。 实现技巧 1.导入依赖库 主要是安装相关的依赖库。本文实现的环境为&#xff1a;python 3.7。 from __future__ import division import math …

C语言联合体

联合体 联合体联合体基本概念联合体特点联合体内存结构图 联合体 联合体基本概念 联合体概念&#xff1a; 结构体&#xff08;struct&#xff09;是一种结构体类型或者复杂类型&#xff0c;它可以包含多个类型不同的成员另外一种和结构体非常类似的类型&#xff0c;叫做联合…

GPT-4 变懒了?官方回复

你是否注意到&#xff0c;最近使用 ChatGPT 的时候&#xff0c;当你向它提出一些问题&#xff0c;却得到的回应似乎变得简短而敷衍了&#xff1f;对于这一现象&#xff0c;ChatGPT 官方给出了回应。 译文&#xff1a;我们听到了你们所有关于 GPT4 变得更懒的反馈&#xff01;我…

在HTML中插入音频和视频(详解)

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区留言 …

外汇交易中的MT4软件优势:解析软件对交易的影响!

近年来&#xff0c;随着金融科技的不断发展&#xff0c;MT4软件作为外汇交易领域的领先平台&#xff0c;备受交易者青睐。本文将探讨MT4软件在外汇交易中的优势以及对交易的影响&#xff0c;帮助读者深入了解这一交易利器。 ### 1. MT4软件概述 MetaTrader 4(简称MT4)是一款由M…

深度学习 时间序列回归学习笔记

目录 常用的深度学习时间序列回归模型: ARIMA模型 ETS模型 效果评估

低多边形3D建模动画风格纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时&#xff0c;有几种不同的风格&#xf…

【Linux】make/Makefile --- 自动化构建项目的工具

目录 一、make/Makefile的简单使用 二、Makefile 的语法规则 三、实现的原理 3.1 make/Makefile识别文件新旧 3.2 .PHONY修饰的伪目标总是被执行 3.3 make/Makefile是具有依赖性的推导能力的 四、语法技巧 五、注意事项 Linux中自动化构建项目最简单的方式&#xff1a;…

python乐观锁和悲观锁

在并发编程中&#xff0c;锁是一种常用的机制&#xff0c;用于保护共享资源的访问。乐观锁和悲观锁是两种不同的锁机制。 乐观锁&#xff1a;不会一开始就加锁&#xff0c;在更新的时候&#xff0c;判断一下在此期间别人是否修改了数据&#xff0c;若修改了不执行此操作&#…

软件质量:建立信心的十大指标

. Bug 数量——可能按优先级或严重性排列 一般来说&#xff0c;错误的数量会在项目生命周期的中期开始增加。在截止日期之前的几天或几周&#xff08;取决于项目的规模&#xff09;&#xff0c;团队将集中精力减少 bug 的数量&#xff0c;直到 bug 的数量达到某种渐近线。这个渐…

Nginx基础篇:Nginx搭建、Nginx反向代理、文件服务器部署配置。

Nginx Linux系统安装以及反向代理的配置 简介优点nginx 环境安装常用Nginx 命令nginx 文件服务器搭建 简介 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点…

如何把kubernetes pod中的文件拷贝到宿主机上或者把宿主机上文件拷贝到kubernetes pod中

1. 创建一个 Kubernetes Pod 首先&#xff0c;下面是一个示例Pod的定义文件&#xff08;pod.yaml&#xff09;&#xff1a; cat > nginx.yaml << EOF apiVersion: v1 kind: Pod metadata:name: my-nginx spec:containers:- name: nginximage: nginx EOF kubectl app…

LabelImg的使用及注意事项

LabelImg是一款开源的图像标注工具&#xff0c;它主要用于标注目标检测、语义分割和图像分类等深度学习中需要的数据集。通过使用LabelImg&#xff0c;用户可以快速、准确地为图片中的目标添加标注信息&#xff0c;从而建立数据集。 使用步骤&#xff1a; 下载LabelImg&#x…

java测试rtsp地址连接状态,测试RTSP连接状态是否成功,java如何测试rtsp地址连接是否成功

import java.net.Socket; import java.net.URI; import java.net.URISyntaxException;/*** ClassName: RTSPUtils* Description: 测试RTSP连接状态* Author: zhanghui* Date: 2023-12-08* Version: 1.0**/ public class RTSPUtils {private static final int TIMEOUT_MS 10000…