微信小程序 服务端返回富文本,图片无法显示

场景:
  微信小程序开发中,需要从服务端拿取数据渲染到页面上,后台返回的富文本里,图片路径有时是没有带域名前缀的,导致图片无法正常显示。
在这里插入图片描述
解决方案:
  在富文本返回时,用正则匹配,加上域名,图片就可以正常显示了。
this.data.urlPage 是域名’http://***
/south-new-city 是/south-new-city开头的匹配地址
在这里插入图片描述
  图片是显示了,但样式溢出屏幕,使页面可以左右滑动,影响使用及美观性;同样可以用正则进行操作。
在这里插入图片描述
  至此,就解决了小程序后台返回富文本,图片无法显示的问题了。
完整代码

   let content ='<p><br></p><p><img src=\"/south-new-city/下载_1695626989061.png\"><img src=\"/south-new-city/下载 (1)_1695626992508.png\"></p>'content = content.replace(/src="[/]south-new-city/gi, `src="${urlConstant.baseFileUrl}/south-new-city`)content = content.replace(/\<img/gi, '<img style="width:100%;height:auto"')wxParse.wxParse('content', 'html', content, that);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/171629.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

『OPEN3D』1.8 点云的配准理论

点云的配准是将不同的3D点云对齐成一个完成的点云模型&#xff1b;配准的目标是找到两帧点云之间的相对旋转&#xff08;rotation&#xff09;与平移&#xff08;translation&#xff09;&#xff0c;使得两份点云中有重叠的区域能够完好拼接。 点云配准示例图&#xff08;来自…

CentOS/Ubuntu/Windows/MacOS系统上安装 Docker

在 CentOS 系统上安装 Docker&#xff0c;可以按照以下步骤进行&#xff1a; CentOS 上安装 Docker 更新软件包索引&#xff1a; 打开终端并运行&#xff1a; sudo yum update安装必要的软件包&#xff1a; Docker 安装需要 yum-utils 软件包&#xff0c;它提供了 yum-config-…

FTL-- GC 垃圾回收

引入概念&#xff1a; OP :独立于用户看的见的容量之外的容量&#xff0c;可以看作是隐藏的容量 WA:写放大&#xff0c;也就是用户写入一笔数据对NAND来说需要写入更多&#xff0c;造成写放大 OP作用&#xff1a; 多出来的空间一般用于存储一些固件的L2P表&#xff0c;更换坏块…

JPA 方式实现 RESTful API

除了常见的方式实现 RESTful API&#xff0c;还有一种简单的方式实现 RESTful API&#xff0c;那就是用 JPA 方式。首先介绍一下 JPA&#xff0c;它是 Sun 公司推荐的 JAVA 持久化规范&#xff0c;为了简化 ORM 技术而产生。需要注意的是&#xff0c;他只是一套规范&#xff0c…

HarmonyOS4.0系列——02、汉化插件、声明式开发范式ArkTS和类web开发范式

编辑器调整 我们在每次退出编辑器后再次打开会直接进入项目文件中&#xff0c;这样在新建项目用起来很是不方便&#xff0c;所以这里跟着设置一下就好 这样下次进入就不会直接跳转到当时的文件项目中&#xff01;&#xff01; 关于汉化 settings → plugins → installe…

什么是 Jest ? Vue2 如何使用 Jest 进行单元测试?Vue2 使用 Jest 开发单元测试实例

什么是Jest? Jest 是一个流行的 JavaScript 测试框架,由 Facebook 开发并维护,专注于简单性和速度。它通常用于编写 JavaScript 和 TypeScript 应用程序的单元测试、集成测试和端到端测试。 特点: 简单易用: Jest 提供简洁的 API 和易于理解的语法,使得编写测试用例变得…

【数据结构】什么是队列?

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 &#x1f4cc;队列的定义 &#x1f4cc;队列的抽象数据类型 &#x1f4cc;队列的顺序存储结构 &#x1f4cc;队列的链式存储结构 结语 人生,是一个又一个小小的队列…

探索网络模型与协议:从OSI到HTTPs的原理解析

一、OSI网络模型 OSI&#xff08;Open Systems Interconnection&#xff09;七层网络参考模型和TCP/IP四层模型都是用于理解和设计计算机网络的框架&#xff0c;但它们之间存在一些差异。 1、七层 vs 四层 OSI七层网络参考模型&#xff1a; 物理层&#xff08;Physical Laye…

人力资源管理后台 === 权限应用

目录 1.权限应用-拆分静态路由-动态路由 2.权限应用-根据用户权限添加动态路由 3.权限应用-根据权限显示左侧菜单 4.权限应用-退出登录重置路由 5.权限应用-功能权限-按钮权限标识 6.权限应用-自定义指令应用功能权限 7.其他模块-集成 8.首页-基本结构和数字滚动 9.首页…

17.找出1000之内的所有完数。

文章目录 前言一、题目描述 二、题目分析 三、解题 程序运行代码 前言 本系列为循环结构编程题&#xff0c;点滴成长&#xff0c;一起逆袭。 一、题目描述 一个数如果恰好等于它的因子之和&#xff0c;这个数就称为“完数”。例如&#xff0c;⑥的因子为1、2、3&#xff0c;而…

python 如何调用GPT系列的api接口,实现想要的功能

目录 问题描述&#xff1a; 问题解决&#xff1a; 问题描述&#xff1a; 随着各种LLMs (Large Language Models&#xff09;的出现&#xff0c;如何调用各种LLMs的api成为了经常会遇见的问题。 问题解决&#xff1a; 下面仅以生成给定sentence的复述句为例&#xff0c;说明…

vue3+ts mitt的使用

安装mitt :npm i mitt -Smain.ts: import mitt from mittconst Mit mitt();declare module vue {export interface ComponentCustomProperties{$Bus:typeof Mit} } app.config.globalProperties.$BusMit在A组件中使用 <template><div><h1>我是A<…

【深度学习】如何找到最优学习率

经过了大量炼丹的同学都知道&#xff0c;超参数是一个非常玄乎的东西&#xff0c;比如batch size&#xff0c;学习率等&#xff0c;这些东西的设定并没有什么规律和原因&#xff0c;论文中设定的超参数一般都是靠经验决定的。但是超参数往往又特别重要&#xff0c;比如学习率&a…

建造者模式-C语言实现

UML类图&#xff1a; 代码实现&#xff1a; #include <stdio.h> #include <stdlib.h>// 产品类 typedef struct {char* part1;char* part2;char* part3; } Product;// 抽象建造者类 typedef struct {void (*buildPart1)(void*, const char*);void (*buildPart2)(v…

论文种使用的数据集怎么获取

1.根据论文中的描述&#xff0c;可能会提及数据集已上传至某个网站&#xff01; 最常见的 1.GitHub 2.paper with code 3.期刊官网找到这篇论文&#xff0c;看是否存在补充材料&#xff01; 4.论文中提到&#xff0c;若读者需要&#xff0c;可邮件联系XXX(某位作者或任意作者)…

RabbitMQ之延迟消息实战

RabbitMQ之延迟消息实战 使用死信交换机实现延迟消息 使用死信交换机的过期时间以及没有消费者进行消费&#xff0c;时间到了就会到死信队列中&#xff0c;由此可以实现延迟消息使用延迟消息插件 前提&#xff1a;需要mq配置插件 延时信息案例实战 把一个30分钟的延迟消息可以…

前端review

关于实时预览vs code中的颜色代码需要安装的插件&#xff0c;包括html文件格式中的颜色代码安装Flutter Color插件 VSCode 前端常用插件集合 1.Auto Close Tag自动闭合HTML/XML标签 2.Auto Rename Tag自动完成另一侧标签的同步修改 3.Beautify格式化代码&#xff0c;值得注…

【高可用架构】Haproxy 和 Keepalived 的区别

Haproxy 和 Keepalived 的区别 1.负载均衡器介绍2.Haproxy 和 Keepalived 的基本概念和特点2.1 Haproxy2.2 Keepalived 3.Haproxy 和 Keepalived 的区别3.1 功能上的区别3.2 架构上的区别3.3 配置上的区别 4.总结 1.负载均衡器介绍 负载均衡器是一种解决高并发和高可用的常用的…

每日OJ题_算法_双指针⑥剑指 Offer 57. 和为s的两个数字

目录 剑指 Offer 57. 和为s的两个数字 解析代码&#xff1a; 剑指 Offer 57. 和为s的两个数字 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 难度 简单 购物车内的商品价格按照升序记录于数组 price。请在购物车中找到两个商品的价格总…

蓝桥杯官网练习题(平均)

问题描述 有一个长度为 n 的数组&#xff08; n 是 10 的倍数&#xff09;&#xff0c;每个数 ai 都是区间 [0,9] 中的整数。小明发现数组里每种数出现的次数不太平均&#xff0c;而更改第 i 个数的代价为 bi&#xff0c;他想更改若干个数的值使得这 10 种数出现的次数相等…