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

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. ef 查询生成语句的几种方式

    前言 整理一下ef 如何查看生成sql 语句的,现在有ef core 了,统一整理一下. 正文 方式如下: 数据库监听 这是一种推荐方式,因为调试和代码分开,不会有影响. 然后连接: 然后可以进行一些 ...

  2. 当服务器间通讯出现No route to host(Host unreachable)

    服务器间通讯出现No route to host(Host unreachable) 背景:因为某些原因,主机房服务器集体重启,其中部署的系统也需要重启,负责的系统是五台服务器,两台用来作为应用的应用 ...

  3. E百科 | 第2期 扒一扒能加速互联网的QUIC协议

    简介: 众所周知,QUIC(Quick UDP Internet Connection)是谷歌制定的一种互联网传输层协议,它基于UDP传输层协议,同时兼具TCP.TLS.HTTP/2等协议的可靠性与安 ...

  4. Morphling:云原生部署 AI , 如何把降本做到极致?

    ​简介: Morphling 本意是游戏 Dota 中的英雄"水人",他可以根据环境要求,通过灵活改变自身形态,优化战斗表现.我们希望通过 Morphling 项目,实现针对机器学 ...

  5. 运行模型对比 gemma:7b, llama2, mistral, qwen:7b

    [gemma:2b] total duration: 1m5.2381509sload duration: 530.9µsprompt eval duration: 110.304msprompt e ...

  6. [ML] 工程师使用 Keras 的步骤指引

    设置 import numpy as np import tensorflow as tf from tensorflow import keras 介绍 在训练模型之前准备数据(将其转换为 NumP ...

  7. [K8s] Kubernetes 集群部署管理方式对比, kops, kubeadm, kubespray

    kops 是官方出的 Kubernetes Operations,生产级 K8s 的安装.升级和管理. 可以看做是适用于集群的 kubectl,kops 可帮助您从命令行创建,销毁,升级和维护生产级, ...

  8. k8s对接Ceph实现持久化存储(16)

    一.Ceph简介 官网:https://ceph.com/en/ https://docs.ceph.com/en/latest/start/intro/ ceph 是一种开源的分布式的存储系统 包含 ...

  9. ITIL一定要去认证吗?哪个版本合适

    关于ITIL的演进 ITIL是在演进发展中的,v1并不成功,v2 v3讲究流程与控制,其实都是偏向务虚,理论东西较多,能落地的少或许OGC的专家们自己也发现 光靠口头忽悠并不能说服最终用户接受ITIL ...

  10. keepalived(1)- keepalived集群概述

    目录 1. 高可用集群概述 2. keepalived概述 2.1 keepalived介绍 2.2 keepalived体系架构 2.3 keepalived实现原理 2.4 keepalived配 ...