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

Posted 2023-03-01 北极光之夜。

一、先言

有时后端直接返回的富文本内容，前端展示的时候会出现图片太大或太小，所以需要处理一下，，，实现并不难，主要是利用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年了啊！疫情终于快要结束了啊，哭了兄弟们，太难受了阿这三年。

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

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

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~