当前位置: 首页 > news >正文

uniapp编译微信小程序富文本rich-text的图片样式不生效原因

				this.detail.contents = this.detail.contents.replace(/\<img/gi, '<img style="display:block;max-width:90%;height:auto;border:2px solid #eee;box-shadow:5px 5px 5px rgba(100,100,100,0.8);margin-bottom:10px;text-align:center;" ');

开始采用这个replace方法,编译后h5中生效,微信小程序中不生效

详细查看代码,是因为在后台增加文章的时候,富文本编辑器自动给图片设置了宽度,导致在小程序中的替换虽然成功了,但是不生效

修改思路:先把rich-text中的style属性替换掉,然后再替换想要的样式,也就是通过两次replace实现,代码如下

this.detail.contents = this.detail.contents
//这里把img里面的style替换成空
.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig, '')
.replace(/\<img/gi, '<img style="display:block;max-width:90%;height:auto;border:2px solid #eee;box-shadow:5px 5px 5px rgba(100,100,100,0.8);margin-bottom:10px;text-align:center;" ');

好了,预览小程序,生效了,仅供参考

http://www.lryc.cn/news/209825.html

相关文章:

  • Django实战项目-学习任务系统-任务管理
  • ubuntu18.04设置开机自动启动脚本(以自动启动odoo命令行为例讲解)
  • golang工程——grpc-gateway 转发http header中自定义字段到grpc上下文元数据
  • CPU眼里的C/C++: 1.3 汇编级单步调试函数执行过程
  • 数据结构时间复杂度(补充)和空间复杂度
  • Mac-postman存储文件目录
  • JAVA面试题简单整理
  • dd命令用法学习,是一个功能强大的工具
  • Games104现代游戏引擎笔记 网络游戏进阶架构
  • Apollo 快速上手指南:打造自动驾驶解决方案
  • C现代方法(第14章)笔记——预处理器
  • Kafka KRaft模式探索
  • LVS-keepalived实现高可用
  • Linux内核驱动开发的需要掌握的知识点
  • nginx 动静分离 防盗链
  • MYSQL(索引篇)
  • Java API访问HDFS
  • 高三高考免费试卷真题押题知识点合集
  • css 计算函数属性:calc() 不起效 原因
  • 2、TB6600驱动器介绍【51单片机控制步进电机-TB6600系列】
  • Vue3:将表格数据下载为excel文件
  • vue+Fullcalendar
  • Spring定时任务+webSocket实现定时给指定用户发送消息
  • C语言学习笔记(六):数组(1)
  • apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】
  • 【IO面试题 五】、 Serializable接口为什么需要定义serialVersionUID变量?
  • san.js源码解读之模版解析(parseTemplate)篇——readIdent函数
  • 【excel技巧】excel单元格内如何换行?
  • SSD1306 oled显示屏的驱动SPI接口
  • RSA:基于小加密指数的攻击方式与思维技巧