uni-app rich-text组件富文本图片展示不全问题

背景:php+fastadmin+富文本插件上传富文本内容到数据库,uni-app渲染富文本内容。这里后端不需要特殊处理。uni-app的rich-text组件展示图片跑板。直接贴代码。

<template><view><title-bar title="会员动态" back backcolor="#ffffff"></title-bar><view class="service-list"><view class="top"><!-- <view class="text1">{{result.title}}</view> --><view class="operate"><rich-text :nodes="result.content|formatRichText"></rich-text></view></view></view></view>
</template>
<script>onLoad(option) {this.id = JSON.parse(decodeURIComponent(option.detail));console.log(this.id,"传过来啥")this.getUser()},filters: {formatRichText (html) { //控制小程序中图片大小	let newContent= html.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(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');		return newContent;		}			}
</script>

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

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

相关文章

解释区块链技术的应用场景和优势

概述 区块链技术是一种分布式数据库技术&#xff0c;用于存储和传输数字资产&#xff08;如加密货币&#xff09;的信息。它通过将交易记录分散保存到节点网络中的多个节点上&#xff0c;从而保证了数据的安全性和透明度。区块链技术的核心是基于密码学技术的算法&#xff0c;…

JDK1.8下载、安装和环境配置使用

JDK1.8下载、安装和配置 下载安装包解压文件配置测试安装 下载安装包 链接地址 https://pan.baidu.com/s/1RF7-ulq0_qAelpXskDxdvA 提取码 d1y0解压文件 jdk1.8.0_181 配置 右击我的电脑&#xff0c;选择属性 2.点击高级系统设置 在系统变量区里点击&#xff1a;新建…

Oralce集群管理-19C RAC 私有网络调整为BOND1

1 尝试在线添加私有网络的新接口 是否成功。 使用oifcfg命令在线添加新的网卡接口&#xff0c;在还没有配置bond1的条件下 也是可以添加成功的。 [gridorcldb1 ~]$ oifcfg getif eno3 192.168.224.0 global public ens3f0 10.2.0.0 global cluster_interconnect,asm eno…

2023年高教社杯数学建模国赛C题详细版思路

C 题 蔬菜类商品的自动定价与补货决策 2023年国赛如期而至&#xff0c;为了方便大家尽快确定选题&#xff0c;这里将对C题进行解题思路说明&#xff0c;以分析C题的主要难点、出题思路以及选择之后可能遇到的难点进行说明&#xff0c;方便大家尽快找到C题的解题思路。 难度排…

【OJ比赛日历】快周末了,不来一场比赛吗? #09.09-09.15 #15场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2023-09-09&#xff08;周六&#xff09; #5场比赛2023-09-10…

适用于多种场景功能强大的在线海报图片素材设计器源码

源码介绍: 在线海报设计系统素材设计源码是一个漂亮且功能强大的在线海报图片设计器, 仿照稿定设计而成。该系统适用于多种场景,包括海报图片生成、电商分享图、文章长图、 视频/公众号封面等。用户无需下载软件,即可轻松实现创意,迅速完成排版,让设计更简单! 该系统…

Python之基础数据类型(二)

目录 列表 list初始化切片&#xff08;有序&#xff09;可变数据类型存放任何数据类型 常用方法运算底层存储&#xff08;地址值的传递&#xff09;遍历示例 元组 tuple初始化与list的主要区别是不可变运算与list相互转换 字典 dict初始化删除字典的合并in、not in、values()遍…

Ubuntu离线或在线安装CMake

首先下载适用于Ubuntu的CMake安装包&#xff0c;可以去官网下载&#xff0c;也可以通过下面的命令下载&#xff08;需要联网&#xff09;&#xff1a; wget https://cmake.org/files/v3.22/cmake-3.22.1.tar.gz将下载的安装包进行解压&#xff1a; tar -xvzf cmake-3.22.1.ta…

本地如何使用HTTPS进行调试

在现代前端开发中&#xff0c;HTTPS已经成为不可或缺的一部分&#xff0c;因为它在保护用户数据和确保网站安全性方面发挥着关键作用。然而&#xff0c;有时在本地开发过程中启用HTTPS可能会变得有些复杂。在本文中&#xff0c;我们将介绍如何轻松地在本地进行HTTPS调试&#x…

JVM学习(五)--方法区

概念&#xff1a; 方法区就是存和类相关的东西&#xff0c;成员方法&#xff0c;方法参数&#xff0c;成员变量&#xff0c;构造方法&#xff0c;类加载器等&#xff0c;逻辑上存在于堆中&#xff0c;但是不同的虚拟机对它的实现不同&#xff0c;oracle的hotsport vm在1.6的时…

U-net网络学习记录

U-net网络 本质上是一个用于图像分割的神经网络 输入是一幅图&#xff0c;输出是目标的分割结果。继续简化就是&#xff0c;一幅图&#xff0c;编码&#xff0c;或者说降采样&#xff0c;然后解码&#xff0c;也就是升采样&#xff0c;然后输出一个分割结果。根据结果和真实分…

uwsgi部署多进程django apscheduler与问题排查

&#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是Zeeland&#xff0c;开源建设者与全栈领域优质创作者。&#x1f4dd; CSDN主页&#xff1a;Zeeland&#x1f525;&#x1f4e3; 我的博客&#xff1a;Zeeland&#x1f4da; Github主页: Undertone0809 (Zeeland)&…

基于Simulink的用于电力系统动态分析

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【正版软件】Air Explorer - 一个程序访问您的所有云服务

前言&#xff1a;Air Explorer支持最好的云服务。 功能特点&#xff1a; 直接管理云中的文件 设置同一服务上的多个帐户 您可以在任何云服务或计算机之间同步文件夹 云文件浏览器易于使用 通过加入您的所有云服务来增加存储空间 应用程序适用于Windows/Mac Air Explorer…

vue+antd——table组件实现动态列+表头下拉选择功能——技能提升

Table 表格 展示行列数据。 何时使用 当有大量结构化的数据需要展现时&#xff1b; 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。 最近在写vueantd的框架&#xff0c;遇到一个需求&#xff1a;就是要实现table表格的动态列&#xff0c;并且相应的表头要实现下拉…

Scrapy的基本介绍、安装及工作流程

一.Scrapy介绍 Scrapy是什么&#xff1f; Scrapy 是用 Python 实现的一个为了爬取网站数据、提取结构性数据而编写的应用框架(异步爬虫框架) 通常我们可以很简单的通过 Scrapy 框架实现一个爬虫&#xff0c;抓取指定网站的内容或图片。 Scrapy使用了Twisted异步网络框架&…

攻防世界-WEB-NewsCenter

打开环境 有查询&#xff0c;猜测是sql注入 保存请求头到文件中 准备利用sqlmap 查找数据库 python sqlmap.py -r ./123.txt --dbs 查找表 python sqlmap.py -r ./123.txt --tables -D news 查找字段 python sqlmap.py -r ./123.txt --column -D news -T secret_table 显示字…

【Java Web】Servlet规范讲解

目录 一、前言 二、Servlet规范介绍 2.1 常见版本及新功能 2.2 Servlet的作用 2.3 Servlet的本质 三、Servlet接口和实现类 3.1 Servlet接口 3.2 Servlet接口实现类示例 3.3 Servlet接口实现类开发步骤 3.3.1 关键点 3.3.2 引入Servlet源码包 1、描述 Servlet接口…

Java-day13(IO流)

IO流 凡是与输入&#xff0c;输出相关的类&#xff0c;接口等都定义在java.io包下 1.File类的使用 File类可以有构造器创建其对象&#xff0c;此对象对应着一个文件(.txt,.avi,.doc,.mp3等)或文件目录 File类对象是与平台无关的 File中的方法仅涉及到如何创建&#xff0c;…

OpenCV(二十三):中值滤波

1.中值滤波的原理 中值滤波&#xff08;Median Filter&#xff09;是一种常用的非线性图像滤波方法&#xff0c;用于去除图像中的椒盐噪声等离群点。它的原理是基于邻域像素值的排序&#xff0c;并将中间值作为当前像素的新值。 2.中值滤波函数 medianBlur() void cv::medianBl…