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

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

news 文章来源：https://blog.csdn.net/cb1101/article/details/134051084 2025/4/20 19:06:02 
				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;" ');

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

相关文章：

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…...

编程日记 2023/10/29 2:47:41

Django实战项目-学习任务系统-任务管理

接着上期代码框架&#xff0c;开发第3个功能&#xff0c;任务管理&#xff0c;再增加一个学习任务表&#xff0c;用来记录发布的学习任务的标题和内容&#xff0c;预计完成天数&#xff0c;奖励积分和任务状态等信息。 第一步&#xff1a;编写第三个功能-任务管理 1&#xff0…...

编程日记 2023/10/29 2:46:39

ubuntu18.04设置开机自动启动脚本（以自动启动odoo命令行为例讲解）

简介 ubuntu作为服务器使用时&#xff0c;常常需要在机器重启时能自动启动我们开发的服务。 Ubuntu 16.10开始不再使用initd管理系统&#xff0c;改用systemd&#xff0c;包括用systemctl命令来替换了service和chkconfig的功能。 systemd 默认读取 /etc/systemd/system 下的配…...

编程日记 2023/10/29 2:45:39

golang工程——grpc-gateway 转发http header中自定义字段到grpc上下文元数据

http header 转发到 grpc上下文 grpc网关可以将请求体内容转发到grpc对应消息中。那如何获取http header头中的信息&#xff0c;本文将介绍如何将http header转发到grpc上下文并采用拦截器&#xff0c;获取http header中的内容。 有些http header中的内置字段是会转发的比如Au…...

编程日记 2023/10/29 2:43:37

CPU眼里的C/C++: 1.3 汇编级单步调试函数执行过程

1. 目的 2. 基于 GDB 的汇编级单步调试 原始代码 #include <stdio.h>long test() {long a 1;a 2;return a; }int main() {int ret test();printf("test return %d\n", ret);return 0; }关键 gdb 命令 si 指令执行汇编级的单步调试info registers 读取寄…...

编程日记 2023/10/29 2:42:35

数据结构时间复杂度（补充）和空间复杂度

Hello&#xff0c;今天事10月27日&#xff0c;距离刚开始写博客已经过去挺久了&#xff0c;我也不知道是什么让我坚持这么久&#xff0c;但是学校的课真的很多&#xff0c;很少有时间多出来再学习&#xff0c;有些科目马上要考试了&#xff0c;我还不知道我呢不能过哈哈哈&…...

编程日记 2023/10/29 2:41:34

Mac-postman存储文件目录

今天postman弹窗要求登录账号才可访问之前的API文档数据。 但是这postman的账号又是前同事的账号&#xff0c;我没有他的账号和密码啊。 登录了我自己的postman账号后&#xff0c;所有的api文档都不见了....我服了。 首先去屏幕左上角---> 前往 --->个人 然后键盘按显…...

编程日记 2023/10/29 2:40:33

JAVA面试题简单整理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、重载和重写的区别一、&和&&的区别一、get和post请求的区别 delete、put一、cookie和session的区别一、Autowired和Resource区别一、”和equals…...

编程日记 2023/10/29 2:39:32

dd命令用法学习，是一个功能强大的工具

dd 命令是一个功能强大的工具&#xff0c;它有许多参数可以用来控制其行为。以下是 dd 命令中常用的一些参数&#xff1a; - ifinputfile&#xff1a;指定输入文件的路径。 - ofoutputfile&#xff1a;指定输出文件的路径。 - bssize&#xff1a;设置每个块的大小。可以使用不同…...

编程日记 2023/10/29 2:38:30

Games104现代游戏引擎笔记 网络游戏进阶架构

Character Movement Replication 角色位移同步 玩家2的视角看玩家1的移动是起伏一截一截&#xff0c;并且滞后的 interpolation&#xff1a;内插值&#xff0c;在两个旧的但已知的状态计算 extrapolation&#xff1a;外插值&#xff0c;本质是预测 内插值&#xff1a;但网络随着…...

编程日记 2023/10/29 2:37:29

Apollo 快速上手指南：打造自动驾驶解决方案

快速上手 概述云端体验登录云端仿真环境 打开DreamView播放离线数据包PNC Monitor 内置的数据监视器cyber_monitor 实时通道信息视图福利活动 主页传送门&#xff1a;&#x1f4c0; 传送 概述 Apollo 开放平台是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自…...

编程日记 2023/10/29 2:36:28

C现代方法（第14章）笔记——预处理器

文章目录 第14章 预处理器14.1 预处理器的工作原理14.2 预处理指令14.3 宏定义14.3.1 简单的宏14.3.2 带参数的宏14.3.3 #运算符14.3.4 ##运算符14.3.5 宏的通用属性14.3.6 宏定义中的圆括号14.3.7 创建较长的宏14.3.8 预定义宏14.3.9 C99中新增的预定义宏14.3.10 空的宏参数(C…...

编程日记 2023/10/29 2:35:27

Kafka KRaft模式探索

1.概述 Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器的选举等。 2.内容…...

编程日记 2023/10/29 2:34:26

LVS-keepalived实现高可用

概念&#xff1a; 本章核心&#xff1a; Keepalived为LVS应运而生的高可用服务。LVS的调度无法做高可用&#xff0c;预算keepalived这个软件&#xff0c;实现了调度器的高可用。 但是&#xff1a;Keeplived不是专门为LVS集群服务的&#xff0c;也可以做其他服务器的高可用 LVS…...

编程日记 2023/10/29 2:32:24

Linux内核驱动开发的需要掌握的知识点

Linux内核驱动开发是一项复杂而有挑战性的任务&#xff0c;需要掌握多方面的知识和技能。下面是一些需要掌握的关键知识点&#xff0c;这些知识将有助于你成功地开发Linux内核驱动程序。 1. Linux内核基础知识 首先&#xff0c;了解Linux内核的基础知识至关重要。这包括Linux…...

编程日记 2023/10/29 2:30:21

nginx 动静分离 防盗链

一、动静分离环境准备静态资源配置(10.36.192.169)安装nginx修改配置文件重启nginx 动态资源配置(192.168.20.135)yum安装php修改nginx配置文件重启nginx nginx代理机配置&#xff08;192.168.20.134&#xff09;修改nginx子自配置文件重启nginx 客户端访问 二、防盗链nginx防止…...

编程日记 2023/10/29 2:28:18

MYSQL（索引篇）

一、什么是索引 索引是一种数据结构&#xff0c;它用来帮助MYSQL更高效的获取数据 采用索引可以提高数据检索的效率&#xff0c;降低IO成本 通过索引对数据排序&#xff0c;降低数据排序成本&#xff0c;降低CPU消耗 常见的有&#xff1a;B树索引、B树索引、哈希索引。其中Inno…...

编程日记 2023/10/29 2:27:17

Java API访问HDFS

一、下载IDEA 下载地址&#xff1a;https://www.jetbrains.com/idea/download/?sectionwindows#sectionwindows 拉到下面使用免费的IC版本即可。 运行下载下来的exe文件&#xff0c;注意安装路径最好不要安装到C盘&#xff0c;可以改成其他盘&#xff0c;其他选项按需勾选即可…...

编程日记 2023/10/29 2:26:16

高三高考免费试卷真题押题知识点合集

发表于安徽 温馨提示&#xff1a;有需要的真题试卷可联系本人&#xff0c;百卷内上免费资源。 感觉有用的下方三连&#xff0c;谢谢 ​ 。 免费版卷有6-60卷每卷平均4-30页 高三免费高三地理高三英语高三化学高三物理高三语文高三历史高三政治高三数学高三生物 付费版卷有1…...

编程日记 2023/10/29 2:25:15

css 计算函数属性：calc() 不起效 原因

踩坑&#xff1a;注意事项(- 减号或加号前后需要空格&#xff01;&#xff01;&#xff01;) calc(100% - 251px); 这里错误写法中-两边没加空格&#xff0c;导致width不生效。但并不是所有运算符间都需要加空格&#xff0c;只有 和 - 需要加空格&#xff0c;因为运算允许负…...

编程日记 2023/10/29 2:24:14

2、TB6600驱动器介绍【51单片机控制步进电机-TB6600系列】

摘要&#xff1a;本节介绍TB6600驱动器界面及关键参数设置 一、驱动器功能界面 二、关键参数 输入电压&#xff1a;DC9-42V 输出电流&#xff1a;0.5-4A 最大功耗&#xff1a;160W 细分设置&#xff1a;1,2/A,2/B,4,8,16,32 工作温度&#xff1a;-10~45C 信号口驱动电流&…...

编程日记 2023/10/29 2:23:13

Vue3：将表格数据下载为excel文件

需求 将表格数据或者其他形式的数据下载为excel文件 技术栈 Vue3、ElementPlus、 实现 1、安装相关的库 下载xlsx 和 file-saver 库 npm install -S file-saver npm install -S xlsx引入XLSX库和FileSaver库 import XLSX from xlsx; import FileSaver from file-saver;…...

编程日记 2023/10/29 2:22:11

vue+Fullcalendar

vueFullcalendar: vueFullcalendar项目代码https://gitee.com/Oyxgen404/vue--fullcalendar.git...

编程日记 2023/10/29 2:21:10

Spring定时任务+webSocket实现定时给指定用户发送消息

生命无罪&#xff0c;健康万岁&#xff0c;我是laity。 我曾七次鄙视自己的灵魂&#xff1a; 第一次&#xff0c;当它本可进取时&#xff0c;却故作谦卑&#xff1b; 第二次&#xff0c;当它在空虚时&#xff0c;用爱欲来填充&#xff1b; 第三次&#xff0c;在困难和容易之…...

编程日记 2023/10/29 2:19:08

C语言学习笔记（六）:数组(1)

0,问题的引入 怎么保存一个学生的成绩 float a; 怎么保存一个班&#xff08;10人&#xff09;的学生的成绩 float a,b,c,d......; float a1,a2,a3,........; 这样太麻烦了 -》“数组” 1&#xff0c;数组 什么是数组&#xff…...

编程日记 2023/10/29 2:18:07

apk反编译修改教程系列-----修改apk中的图片 任意更换apk桌面图片【三】

往期教程&#xff1a; apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】 apk反编译修改教程系列-----任意修改apk版本号 版本名 防止自动更新【二】 这次实例演示下如何更换apk安装后的桌面图标图片。其实这个步骤前面我有一个教程贴。这次针对步骤做个补…...

编程日记 2023/10/29 2:17:05

【IO面试题 五】、 Serializable接口为什么需要定义serialVersionUID变量？

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a; Serializable接口为什么…...

编程日记 2023/10/29 2:16:04

san.js源码解读之模版解析(parseTemplate)篇——readIdent函数

一、源码分析 /*** 读取ident* 这里的 ident 指标识符(identifier)&#xff0c;也就是通常意义上的变量名* 这里默认的变量名规则为&#xff1a;由美元符号($)、数字、字母或者下划线(_)构成的字符串** inner* param {Walker} walker 源码读取对象* return {string}*/ functio…...

编程日记 2023/10/29 2:15:02

【excel技巧】excel单元格内如何换行？

Excel表格&#xff0c;在制作完成之后&#xff0c;在输入数据的时候&#xff0c;总是会遇到内容长度太长导致无法全部显示或者破坏表格整体格式。几天分享4个单元格换行的方法给大家。 方法一&#xff1a; 首先我们先介绍一个&#xff0c;通过调整列宽的方式来达到显示全部内…...

编程日记 2023/10/29 2:14:01

SSD1306 oled显示屏的驱动SPI接口

有IIC接口 和SPI接口 还有8080,6080接口等 arduino SPI接口 直接使用u8g2库实现 //U8G2_SSD1306_128X64_NONAME_F_4W_SW_SPI u8g2(U8G2_R0, /* clock*/ 13, /* data*/ 11, /* cs*/ 10, /* dc*/ 9, /* reset*/ 8); asrpro(SPI接口按下方修改&#xff0c;IIC接口官方有驱动&…...

编程日记 2023/10/29 2:12:59