微信小程序富文本修改图片的大小
一、先言
有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用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总结笔记
…等等
进我主页看更多~
微信小程序富文本修改图片的大小相关推荐
- 微信小程序富文本标签 rich-text 图片自适应大小问题
最近项目新加了一个需求,由于时间比较充足的原因.我完成的很出色,但是无奈测试最后不走寻常路.几句话的说明他加了好多文字还搞了图片,甚至还有了一句经典的名言如果没有 BUG 她就没有工作,叫人苦不堪言. ...
- 微信小程序富文本中图片溢出,使用max-width无效
wx微小程序中使用富文本,发现图片溢出. 使用replace替换<img> 为<img style="max-width:100%">无效时 可使用属性选择 ...
- 微信小程序富文本解析
微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...
- 微信小程序富文本编辑器获取内容
1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
- 微信小程序富文本处理
微信小程序富文本处理 wxml页面代码: <rich-text nodes ="{{content.content}}"></rich-text> ts代码 ...
- 微信小程序富文本渲染(rich-text)换行失效
微信小程序富文本渲染(rich-text)换行失效 给rich-text标签加css 样式 white-space: pre;
- 微信小程序 富文本编辑器组件 editor
微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
- 小程序富文本提取图片可放大缩小
小程序富文本提取图片可放大缩小 启发: step1 step2 step3 step4 step5 最后 启发: 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇 ...
- 微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
最新文章
- 数据库技巧——MySQL十大优化技巧
- python并行编程语言_Python3 系列之 并行编程
- 指针常量和常量指针简单区分理解
- 关于301跳转的多种办法
- Android插件化开发基础之Java类加载器与双亲委派模型
- vue中如何使用vi-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?
- js数组常用方法总结(包括ES6)
- 段错误(核心已转储)问题的分析方法(未成功)
- css显示苹方字体,苹方字体的使用
- Ubuntu17.10下安装TIM
- 虚幻引擎3的代码讲解
- steam移动所有文件至新库文件夹失败_VBA进阶 | 文件操作17:File对象与Files集合详解...
- 关于低功耗车牌识别摄像机,你知道多少
- 十行 Python 代码就提取了韦小宝的身份证信息!
- JAVA GUI(图形用户界面)
- 分享一个有意思题目--击鼓传花
- 字符串-Manacher算法(你知道马拉车算法吗?)
- 【PS必备】各系色卡对照表
- 如何使用OCR文字识别软件提取文字
- 【已解决】ExcelAPInet-Addln.xll的文件格式和扩展名不匹配,文件可能已损坏或不安全,除非您信任其来源,否则请勿打开。是否仍要打开?
热门文章
- 特征分解(eigendecomposition) and 奇异值分解(singular value decomposition, SVD)
- Android开发教程JAVA基础(汇总)
- 网站制作教程,一眼看懂网站怎么建
- 自由空间传播模型 载波频率一定时传输损耗随传播距离的变化
- 【C++】关于std::ostream的构造函数
- 深度学习 (六)Long Short Term Memery
- 郑州达内解析UI设计师与UE设计师两者区别
- Laravel5.1框架关键技术解析(读书笔记)
- 在线编写最简单的个人简历
- random.uniform()详解