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

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. iOS的cer、p12格式证书解析监控

    之前博客写过直接解析ipa包获取mobileprovision文件来监控APP是否过期来,但APP的推送证书还没有做, 大家都知道,iOS的推送证书不会放到ipa包里,只能通过直接解析p12或cer. ...

  2. 深度解读《深度探索C++对象模型》之拷贝构造函数

    接下来我将持续更新"深度解读<深度探索C++对象模型>"系列,敬请期待,欢迎关注!也可以关注公众号:iShare爱分享,自动获得推文. 写作不易,请有心人到我的公众号上 ...

  3. 云原生之在kubernetes集群下部署mysql应用

    一.Mysql介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.MySQL是一种开源的关系型数据库管理系统,可将数据保存在不同的表中,而不是将所有数据放在一个大的仓库内,从而 ...

  4. javascript现代编程系列教程之X——javascript人工智能

    JavaScript 在人工智能(AI)领域的应用主要体现在以下几个方面: 浏览器端的机器学习:TensorFlow.js 是一个在浏览器中运行的 JavaScript 机器学习库,它允许开发者训练和 ...

  5. 从源码入手详解ReentrantLock,一个比synchronized更强大的可重入锁

    写在开头 随手一翻,发现对于Java中并发多线程的学习已经发布了十几篇博客了,多线程 是Java基础中的重中之重!因此,可能还需要十几篇博客才能大致的讲完这部分的知识点,初学者对于这部分内容一定要多花 ...

  6. 【笔记】go语言--函数式编程

    [笔记]go语言--函数式编程 简单来说,go语言的函数式编程体现的是一个闭包的情况 函数式编程 VS 函数指针 函数是一等公民:参数,变量,返回值都可以是函数 高阶函数 函数->闭包 &quo ...

  7. 3分钟创建Serverless Job 定时获取新闻热搜

    简介: 7月25号-8月2号工作日期间,完成场景搭建,即可获得夏日清凉小风扇(每日限量)和阿里云代金券! 云起实验室,由阿里云提供的零门槛云上实践平台.一键预置实验环境,提供详细的实验手册指导,快速体 ...

  8. .NET周刊【4月第2期 2024-04-21】

    国内文章 他来了他来了,.net开源智能家居之苹果HomeKit的c#原生sdk[Homekit.Net]1.0.0发布,快来打造你的私人智能家居吧 https://www.cnblogs.com/h ...

  9. Vue2源码解析-源码调试与核心流程梳理图解

    现在VUE3已经有一段时间了,也慢慢普及起来了.不过因为一直还在使用VUE2的原因还是去了解和学了下它的源码,毕竟VUE2也不会突然就没了是吧,且VUE3中很多原理之类的也是类似的.然后就准备把VUE ...

  10. NoSQL 数据库管理工具,搭载强大支持:Redis、Memcached、SSDB、LevelDB、RocksDB,为您的数据存储提供无与伦比的灵活性与性能!

    NoSQL 数据库管理工具,搭载强大支持:Redis.Memcached.SSDB.LevelDB.RocksDB,为您的数据存储提供无与伦比的灵活性与性能! [官网地址]:http://www.re ...