下面的这个方法是在百度上找的,但是老是报错,一直没找到原因,索性自己就挨个检查了下,发现在过滤之前需要对传过来的值进行检测,是字符串才能让这个方法执行

filters: {
formatRichText(html) { //控制小程序中图片大小
let newContent = ''
newContent = html.replace(/<img[^>]*>/gi,
function(match) {
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) {
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; }
},

以下为完整方法

filters: {
formatRichText(html) { //控制小程序中图片大小
let newContent = ''
if (typeof(html) == 'string') { //检测值为字符串才能进行replace操作
newContent = html.replace(/<img[^>]*>/gi,
function(match) {
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) {
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; } }
},

uniapp 富文本图片100%显示的更多相关文章

  1. java通过freemarker导出包含富文本图片的word文档

    废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) 参考文章:http://www.cnblogs.com/liaofeifig ...

  2. v-html渲染富文本图片宽高问题

    v-html渲染富文本v-html是用来渲染html的节点及字符串的,但是渲染后富文本里的图片宽高会溢出所在div的区域但是使用css直接给img是没有办法设置img的宽高的,需要使用深层级来给img ...

  3. jsp富文本图片和数据上传

    好记性不如烂笔头,记录一下. 2016的最后一天,以一篇博客结尾迎接新的一年. 此处用的富文本编辑器是wangEditor,一款开源的轻量级的富文本编辑器,这里着重说一下里面的图片上传功能. 服务器端 ...

  4. UILabel设置富文本后不显示省略号

    先描述一下问题,项目中用到了UILabel去显示一段富文本文字,超过label显示区域部分,省略号处理. 但是当设置好 attributedText 给label之后,显示出的效果是文字被切割了,并没 ...

  5. vue-quill-editor + element-ui upload实现富文本图片上传

    代码贴上 <template> <div class="quill-editor-example"> <div class="box&quo ...

  6. uniapp - 富文本编辑器editor(仅支持App和微信小程序)

    uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...

  7. layui 富文本 图片上传 后端PHP接口

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...

  8. summernote富文本图片上传,增加视频上传功能、批量上传方法

    Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...

  9. 图片 100%显示. img 全部显示.

    让每个图片 都铺满 ,同样的大小;    只要给 img 设置 固定的高度, 宽度就可以 了. ----------------------- html: <div class="co ...

  10. ueditor富文本框图片显示

    修改config.json /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /*"physicsPath":"E:/Software/apache-tomc ...

随机推荐

  1. 第七課-Channel Study For HTTP Listener & Web Service Sender Intercommunicates Response Handler

    示例说明: 系统A发送XML格式患者信息到Mirth的Source端HTTP Listener,完成患者信息入库逻辑:然后Mirth的Destinations端Web Service Sender调用 ...

  2. 力扣374(java&python)-猜数字大小(简单)

    题目: 猜数字游戏的规则如下: 每轮游戏,我都会从 1 到 n 随机选择一个数字. 请你猜选出的是哪个数字.如果你猜错了,我会告诉你,你猜测的数字比我选出的数字是大了还是小了.你可以通过调用一个预先定 ...

  3. P10160 [DTCPC 2024] Ultra 题解

    [题目描述] 给你一个 \(01\) 序列,你可以进行如下操作若干次(或零次): 将序列中形如 \(101\cdots01\) 的一个子串(即 \(1(01)^k\),\(k\ge 1\))替换成等长 ...

  4. 【ESSD技术解读-03】阿里云块存储企业级特性之异步复制

    ​简介: 在大数据时代,数据就是企业的核心资产,是企业的生命线.在现实世界中,灾难时有发生,当发生灾难时,容灾能力成为企业能否生存的关键.云上容灾服务,通常称为 DRaaS(灾难恢复即服务)不但能够省 ...

  5. dotnet C# 通过 Vortice 使用 Direct2D 的 ID2D1CommandList 入门

    本文将告诉大家如何通过 Vortice 使用 D2D 的 CommandList 功能 本文属于 DirectX 系列博客,更多 DirectX 和 D2D 以及 Vortice 库的博客,请参阅我的 ...

  6. kubernetes-1.26安装

    一.环境准备 k8s集群角色 IP 主机名 安装组件 配置 控制节点 192.168.10.10 master apiserver.controller-manager.scheduler.etcd. ...

  7. Solution Set - 数论相关

    绝了,六道题都差一步想出来或者差一个细节就开始看题解. CF906D Link&Submission. 要求 \(a^b\bmod p\),那就要求 \(b\bmod \varphi(p)\) ...

  8. 【VMware vCenter】连接和使用vCenter Server嵌入式vPostgres数据库。

    vCenter Server 早期支持内嵌(embedded)和外部(external)数据库,内嵌数据库就是vPostgres,基于VMware Postgres数据库(PostgreSQL数据库) ...

  9. WSL2使用桥接网络,并指定IP

    前言 微软终于解决了宇宙级难题了,一直以来的WSL2每次启动IP都是动态分配的,并且是NAT的网络.当然网上对此也有一些解决方案,编写脚本在启动时修改,但是太麻烦了,这次很完美的解决了这个难题. 检查 ...

  10. sendmail发送慢的问题

    1.使用python的脚本,发送邮件.代码如下: 点击查看代码 [root@ZabbixServerMasterNode ~]# cd /etc/zabbix/alertscripts/ [root@ ...