微信小程序富文本修改图片的大小

北极光之夜。

已于 2023-02-07 11:02:13 修改

阅读量2.5k

点赞数 5

分类专栏：前端大杂烩微信小程序与uni-app 日常生活文章标签：微信小程序富文本修改图片样式富文本图片大小程序人生生活

于 2023-02-07 10:18:16 首次发布

本文链接：https://blog.csdn.net/luo1831251387/article/details/128913165

版权

123 篇文章 51 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

4 篇文章 1 订阅

订阅专栏

有时后端直接返回的富文本内容，前端展示的时候会出现图片太大或太小，所以需要处理一下，，，实现并不难，主要是利用replace方法全局替换图片img标签的style样式，修改其宽度样式。

1.replace方法全局添加图片img标签的style样式

let txt = 'xxx'  //富文本内容
txt =  txt.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')

理解后想替换什么就替换什么。

2.页面标签显示：

 <rich-text  class="notice-content" nodes="{{txt}}">
  </rich-text>

以上就可以了。

推荐一个小程序富文本组件给你们，mp-html 。能够使得富文本图片自适应，还可以点击预览放大图片，，，好用的很。人嘛，就应该利用工具23333
官网——>

以上就是全部内容啦

hhh，应该没人说我水文章把。。。

3年了，3年了啊！疫情终于快要结束了啊，哭了兄弟们，太难受了阿这三年。

不多说了，一个人准备去旅行，趁青春，马上冲！把压抑的情绪全部释放，寻找内心的平静，，，签证已经办好，已经订了周六的机票啦！

回来后再好好的思考接下来的路

在这里插入图片描述

关注

专栏目录