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

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. native react 代码智能提示

    背景 在vscode 中,虽然有插件可以达到代码提示的效果但是不是很嗨. 所以加上这些: 全局安装typings: npm install typings -g 1 安装react和react-nat ...

  2. 距离传感器GT2的使用介绍

    一. 1.使用注意要点: (1)要使用到"清零"功能. 确定其内部清零软元件,认准"外部请求",注意组别容易混淆. (2)如果要用到"复位" ...

  3. easyx的使用,图像插入(2.0)

    本文从B站学习,借鉴,一些贴图素材借鉴游戏网图: 视频链接:图像输出_哔哩哔哩_bilibili 想使用图片,先用easyx提供的数据类型定义一个变量: 在对图片进行加载,差不多像是赋值,这个变量名相 ...

  4. hashchang事件是异步更新的

    1.代码 // 此时会触发hashchange location.hash = '/test' window.addEventListener('hashchange', () => { con ...

  5. 暑期集训 Day9 —— 模拟赛复盘

    ${\color{Green} \mathrm{Problem\ 1 :大河的序列 }} $ 巨思维... 其实只需要输出序列 max 即可. 死因: \({\tiny 去你的}\) 快速幂 int ...

  6. 基于阿里云 ASK 的 Istio 微服务应用部署初探

    简介: 本文会通过在 ASK 上试用 Istio 部署微服务应用的方式,来验证 ASK 对标准 Kubernetes 的兼容性.Istio 作为 Service Mesh(服务网格)的领导解决方案,一 ...

  7. 深入解读:获得 2021 Forrester 全球云数仓卓越表现者的阿里云数据仓库

    简介: 阿里云在最新发布的 The Forrester Wave: Cloud Data Warehouse, Q1 2021 全球云数据仓库技术评比中进入卓越表现者象限,成为国内唯一入选厂商.本文针 ...

  8. Go语言入门分享

    ​简介: Go语言出自Ken Thompson.Rob Pike和Robert Griesemer之手,起源于2007年,并在2009年正式对外发布.Go的主要目标是"兼具Python等动态 ...

  9. [FE] Quasar BEX 不同位置类型的 debug 调试方式

    科普:[FE] Quasar BEX 所有位置类型 types 不同类型调试,查看错误在不同的位置,如下图中的 4 个位置. Refer:https://quasar.dev/quasar-cli/d ...

  10. [FAQ] panic: listen tcp :xxxx: bind: Only one usage of each socket address (protocol/network address/port) is normally permitted.

    在 Go 中运行服务之前的绑定端口这一步,如果端口号被占用了,那么会提示它只能使用一次. 换个端口号或者检查端口号的占用程序. Link:https://www.cnblogs.com/farwish ...