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,一经查实,立即删除!

相关文章

蓝桥小白赛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; 全字段…

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;我…

低多边形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;…

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

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

LabelImg的使用及注意事项

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

我的创作纪念日(2周年)

机缘 在进入大学之前&#xff0c;完全没有听说过CSDN&#xff0c;第一次使用CSDN应该是搜C语言如何学&#xff0c;或者是和C语言相关的其他内容 因为我本人是学计算机专业的&#xff0c;大一刚开学因为疫情延迟了开学时间&#xff0c;老师线上教课&#xff0c;但是我之前是完…

永磁同步电机反电动势系数怎么算?磁链强度怎么算?转矩系数怎么算?

在进行永磁同步电机simulink仿真时&#xff0c;一个关键参数就是永磁体磁链强度&#xff0c; 实际上在simulink中&#xff0c;永磁体磁链强度/反电动势系数/转矩系数这三个是放一起的&#xff0c;这是因为他们都可互相算出来。 Torque constat (Nm/A) 转矩系数 1.5 * Np *…

Tomcat部署开源站点JPress

前言 JPress使用Java开发&#xff0c;是我们常见的开源博客系统。JPress是一个开源的WordPress插件&#xff0c;它提供了一个简单而强大的方式来创建企业级站点。该插件包括许多特性&#xff0c;例如主题定制、页面构建器、性能优化、SEO、安全、电子商务和社交媒体整合等。使用…

thinkphp6入门(12)-- 一对一关联模型

定义一对一关联&#xff0c;例如&#xff0c;一个用户都有一个个人资料。 一、两表 1.用户表:user 2.工作经验表&#xff1a;work_experience user表的id关联work_experience表的user_id。 注意看&#xff0c;user_id1的有2条工作经验 二、数据模型 主表模型&#xff1a;…

STM32F407-14.3.9-02输出比较模式

输出比较模式 输出比较模式生成波形时 当采用上升沿或下降沿计数时&#xff0c;更改ARR的值可改变周期&#xff1b; 更改CCRx的值会影响到生成波形的相位。波形的占空比永远50% 当采用中心对齐模式时&#xff0c; 更改ARR的值可以改变周期&#xff0c;更改CCRx的值可以改…

操作系统考研笔记(王道408)

文章目录 前言计算机系统概述OS的基本概念OS的发展历程OS的运行机制OS体系结构OS引导虚拟机 进程和线程进程和线程基础进程进程状态进程控制进程通信线程线程实现 CPU调度调度的层次进程调度细节调度算法评价指标批处理调度算法交互式调度方法 同步与互斥基本概念互斥互斥软件实…

Plantuml之类图语法介绍(十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

STM32基于USB串口通信应用开发

✅作者简介&#xff1a;热爱科研的嵌入式开发者&#xff0c;修心和技术同步精进&#xff0c; 代码获取、问题探讨及文章转载可私信。 ☁ 愿你的生命中有够多的云翳,来造就一个美丽的黄昏。 &#x1f34e;获取更多嵌入式资料可点击链接进群领取&#xff0c;谢谢支持&#xff01;…

对无向图进行邻接矩阵的转化,并且利用DFS(深度优先)和BFS(广度优先)算法进行遍历输出, 在邻接矩阵存储结构上,完成最小生成树的操作。

一 实验目的 1&#xff0e;掌握图的相关概念。 2&#xff0e;掌握用邻接矩阵和邻接表的方法描述图的存储结构。 3&#xff0e;掌握图的深度优先搜索和广度优先搜索遍历的方法及其计算机的实现。 4&#xff0e;理解最小生成树的有关算法 二 实验内容及要求 实验内容&#…