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

news2024/12/24 2:24:15

场景:
  微信小程序开发中,需要从服务端拿取数据渲染到页面上,后台返回的富文本里,图片路径有时是没有带域名前缀的,导致图片无法正常显示。
在这里插入图片描述
解决方案:
  在富文本返回时,用正则匹配,加上域名,图片就可以正常显示了。
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.coloradmin.cn/o/1251347.html

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

相关文章

Linux CentOS7 LVM

LVM&#xff08;Logical Volume Manger&#xff09;逻辑卷管理&#xff0c;Linux磁盘分区管理的一种机制&#xff0c;建立在硬盘和分区上的一个逻辑层&#xff0c;提高磁盘分区管理的灵活性。物理设备&#xff0c;是用于保留逻辑卷中所存储数据的存储设备。它们是块设备,可以是…

Python---函数定义时缺省参数(参数默认值)---放最右边

缺省参数也叫默认参数&#xff0c;用于定义函数&#xff0c;为参数提供默认值&#xff0c;调用函数时 可 不传该默认参数的值&#xff08;注意&#xff1a;所有位置参数必须出现在默认参数前&#xff0c;包括函数定义和调用&#xff09;。 比如&#xff1a;原先的代码&#…

相比其他关系型数据库,AntDB JDBC驱动特性有哪些不同之处

摘要&#xff1a;使用Java语言进行各类应用程序的快速开发成为目前比较主要且流行的开发方式。JDBC是 Java 语言中用来连接和操作关系型数据库的 API&#xff0c;在业务程序与关系型数据库通信时&#xff0c;必然会使用JDBC驱动。 本文将通过国产关系型数据库AntDB中的JDBC为大…

LLaMA 2:开源的预训练和微调语言模型推理引擎 | 开源日报 No.86

facebookresearch/llama Stars: 36.0k License: NOASSERTION LLaMA 2 是一个开源项目&#xff0c;用于加载 LLaMA 模型并进行推理。 该项目的主要功能是提供预训练和微调后的 LLaMA 语言模型的权重和起始代码。这些模型参数范围从 7B 到 70B 不等。 以下是该项目的关键特性…

2024年天津天狮学院专升本护理学专业《护理学基础》考试大纲

天津天狮学院2024年护理学专业高职升本入学考试《护理学基础》考试大纲 一、考试性质 《护理学基础》专业课程考试是天津天狮学院护理专业高职升本入学考试的必考科目之一&#xff0c;其性质是考核学生是否达到了升入本科继续学习的要求而进行的选拔性考试。 《护理学基础》考…

歌手荆涛演唱歌曲《老板的孤独》:揭示风光背后的真实心境

由歌手荆涛演唱的《老板的孤独》不仅是一首歌&#xff0c;更像是一部情感的长篇。每一句歌词都深深由触动了那些身处领导位置、背负众多期待与责任的“老板”们。被喊一声“老板”&#xff0c;背后蕴藏的是无尽的压力与孤独&#xff0c;是对自己、对家人、对团队的责任与担当。…

dat文件转换成excel教程

dat文件存在于很多的日用场合&#xff0c;为了更好的去进行办公使用&#xff0c;很多的用户都会将dat文件转换成excel&#xff0c;但是不知道怎么操作的却很多&#xff0c;下面来看看教程吧。 dat文件转换成excel&#xff1a; 1、首先打开excel&#xff0c;然后点击上面的“数…

Python武器库开发-前端篇之CSS基本语法(三十)

前端篇之CSS基本语法(三十) CSS简介 CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页外观和布局的样式表语言。它与 HTML 一起&#xff0c;帮助开发者对网页进行美化和布局。CSS通过定义网页元素的颜色、字体、大小、背景、边框等属性&#xff0c;使网页变得更加美…

华清远见嵌入式学习——网络编程——小项目

项目要求&#xff1a; 代码实现&#xff1a; 服务器端&#xff1a; #include <myhead.h>//定义协议包 struct proto {char type;char name[20];char text[128]; };int main(int argc, const char *argv[]) {//判断从终端输入的字符串的个数if(argc ! 3){printf("…

【算法萌新闯力扣】:卡牌分组

力扣热题&#xff1a;卡牌分组 一、开篇 今天是备战蓝桥杯的第22天。这道题触及到我好几个知识盲区&#xff0c;以前欠下的债这道题一并补齐&#xff0c;哈希表的遍历、最大公约数与最小公倍数&#xff0c;如果你还没掌握&#xff0c;这道题练起来&#xff01; 二、题目链接:…

别再被面试官问倒了!快速失败与安全失败的区别详解

大家好&#xff0c;我是小米&#xff0c;一个热爱技术分享的程序员大哥哥。今天&#xff0c;我们来聊一个在Java面试中经常会被问到的问题——"快速失败"&#xff08;fail-fast&#xff09;和"安全失败"&#xff08;fail-safe&#xff09;的区别。这两个概…

45岁后,3部位“越干净”,往往身体越健康,占一个也要恭喜!

众所周知&#xff0c;人的生命有长有短&#xff0c;而我们的身体健康状态&#xff0c;也同样会受到年龄的影响&#xff0c;就身体的年龄层次而言&#xff0c;往往需要我们用身体内部的干净程度来维持&#xff0c;换句话说就是&#xff1a;若是你的身体内部越干净&#xff0c;那…

【接口技术】实验2:基本I/O实验

实验2 基本I/O实验 一、实验目的 1&#xff1a;掌握I/O端口地址译码电路的工作原理。 2&#xff1a;掌握简单并行接口的工作原理及使用方法。 二、实验内容 1&#xff1a;I/O端口地址译码实验 I/O地址译码电路不仅与地址信号有关&#xff0c;而且与控制信号有关。参加译码…

【面试HOT200】滑动窗口篇

系列综述&#xff1a; &#x1f49e;目的&#xff1a;本系列是个人整理为了秋招面试的&#xff0c;整理期间苛求每个知识点&#xff0c;平衡理解简易度与深入程度。 &#x1f970;来源&#xff1a;材料主要源于【CodeTopHot200】进行的&#xff0c;每个知识点的修正和深入主要参…

Flink实战(11)-Exactly-Once语义之两阶段提交

0 大纲 [Apache Flink]2017年12月发布的1.4.0版本开始&#xff0c;为流计算引入里程碑特性&#xff1a;TwoPhaseCommitSinkFunction。它提取了两阶段提交协议的通用逻辑&#xff0c;使得通过Flink来构建端到端的Exactly-Once程序成为可能。同时支持&#xff1a; 数据源&#…

【问题思考总结】多维随机变量函数的分布的两种情况的计算方法【离连/连连】

问题 今天做李六第一套的时候发现&#xff0c;有的时候&#xff0c;面对这种第二问的题&#xff0c;很自然地就想到了Fz&#xff08;z&#xff09;&#xff0c;然后进行化简&#xff0c;但是有的时候&#xff0c;像这道题&#xff0c;就突然发现P{XY<z}是一个非常复杂的形式…

The Bridge:从临床数据到临床应用(预测模型总结)

The Bridge:从临床数据到临床应用&#xff08;预测模型总结&#xff09; 如果说把临床预测模型比作临床数据和临床应用之间的一座“桥梁”&#xff0c;那它应该包括这样几个环节&#xff1a;模型的构建和评价、模型的概率矫正、模型决策阈值的确定和模型的局部再评价。 模型的构…

Qt 串口编程-从入门到实战

1. Qt 串口通信流程解析 1.1 串行通信和并行通信对比 并行通信适合距离较短的通信&#xff0c;且信号容易受干扰&#xff0c;成本高串口通讯-设备&#xff08;蓝牙&#xff0c; wifi&#xff0c; gprs&#xff0c; gps&#xff09; 1.2 Qt 串口通信具体流程 1. 创建 QSerial…

渗透测试--Nacos系统

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…