一、先言

有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用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总结笔记
…等等
进我主页看更多~

微信小程序富文本修改图片的大小相关推荐

  1. 微信小程序富文本标签 rich-text 图片自适应大小问题

    最近项目新加了一个需求,由于时间比较充足的原因.我完成的很出色,但是无奈测试最后不走寻常路.几句话的说明他加了好多文字还搞了图片,甚至还有了一句经典的名言如果没有 BUG 她就没有工作,叫人苦不堪言. ...

  2. 微信小程序富文本中图片溢出,使用max-width无效

    wx微小程序中使用富文本,发现图片溢出. 使用replace替换<img> 为<img style="max-width:100%">无效时 可使用属性选择 ...

  3. 微信小程序富文本解析

    微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...

  4. 微信小程序富文本编辑器获取内容

    1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...

  5. 微信小程序富文本处理

    微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...

  6. 微信小程序富文本渲染(rich-text)换行失效

    微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;

  7. 微信小程序 富文本编辑器组件 editor

    微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...

  8. 小程序富文本提取图片可放大缩小

    小程序富文本提取图片可放大缩小 启发: step1 step2 step3 step4 step5 最后 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇 ...

  9. 微信小程序富文本编辑器editor初体验-图片上传

    https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...

最新文章

  1. 数据库技巧——MySQL十大优化技巧
  2. python并行编程语言_Python3 系列之 并行编程
  3. 指针常量和常量指针简单区分理解
  4. 关于301跳转的多种办法
  5. Android插件化开发基础之Java类加载器与双亲委派模型
  6. vue中如何使用vi-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?
  7. js数组常用方法总结(包括ES6)
  8. 段错误(核心已转储)问题的分析方法(未成功)
  9. css显示苹方字体,苹方字体的使用
  10. Ubuntu17.10下安装TIM
  11. 虚幻引擎3的代码讲解
  12. steam移动所有文件至新库文件夹失败_VBA进阶 | 文件操作17:File对象与Files集合详解...
  13. 关于低功耗车牌识别摄像机,你知道多少
  14. 十行 Python 代码就提取了韦小宝的身份证信息!
  15. JAVA GUI(图形用户界面)
  16. 分享一个有意思题目--击鼓传花
  17. 字符串-Manacher算法(你知道马拉车算法吗?)
  18. 【PS必备】各系色卡对照表
  19. 如何使用OCR文字识别软件提取文字
  20. 【已解决】ExcelAPInet-Addln.xll的文件格式和扩展名不匹配,文件可能已损坏或不安全,除非您信任其来源,否则请勿打开。是否仍要打开?

热门文章

  1. 特征分解(eigendecomposition) and 奇异值分解(singular value decomposition, SVD)
  2. Android开发教程JAVA基础(汇总)
  3. 网站制作教程,一眼看懂网站怎么建
  4. 自由空间传播模型 载波频率一定时传输损耗随传播距离的变化
  5. 【C++】关于std::ostream的构造函数
  6. 深度学习 (六)Long Short Term Memery
  7. 郑州达内解析UI设计师与UE设计师两者区别
  8. Laravel5.1框架关键技术解析(读书笔记)
  9. 在线编写最简单的个人简历
  10. random.uniform()详解