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

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.kler.cn/a/104478.html

相关文章:

  • 腾讯云价格计算器有用过的吗?好用!
  • 第十九章 Kali Linux桌面概览
  • Qt跨平台(统信UOS)各种坑解决办法
  • 大数据调度最佳实践 | 从Airflow迁移到Apache DolphinScheduler
  • 【开题报告】基于Spring Boot的课程在线预约系统的设计与实现
  • 解决LOGITECH 罗技驱动 MAC版出现的一些问题汇总!
  • SQL 表达式
  • RocketMQ与Kafka差异对比:从架构到性能细节,解析两者在可靠性、扩展性和可用性等方面的优劣
  • CAP定理下:Zookeeper、Eureka、Nacos简单分析
  • 如何在Ubuntu下安装RabbitMQ服务并异地远程访问?
  • Rust trait、动态派发和向上转型
  • 音乐制作软件 Studio One 6 mac中文版软件特点
  • 宣传画册制作技巧,学会了避免踩坑
  • ubuntu安装配置mantis
  • Docker基础知识
  • [AutoSAR系列] 1.3 AutoSar 架构
  • 【Linux】ASCII码表-256个
  • 使用 Cloudflare 电子邮件路由轻松创建和路由电子邮件地址
  • 企业电子招标采购系统源码Spring Boot + Mybatis + Redis + Layui + 前后端分离 构建企业电子招采平台之立项流程图
  • 如何在 SwiftUI 中创建悬浮操作按钮