微信小程序 - 完美解决 rich-text 富文本解析图片无法自适应宽高问题,图片超出屏幕宽度且不受控(详细示例源码,简单快速无需任何第三方插件)

news/2024/11/9 1:48:02/

前言

本文将提供一个函数,帮助您解决图片无法适应的问题,另外函数中还提供了一些常见的样式处理。

使用官方 <rich-text> 组件或第三方插件解析富文本时,当内容包含图片时显示的结果就会超出父容器宽度,

会导致出现横向滚动条与图片变形,如下图所示对比情况。

在这里插入图片描述

解决方案

对显示前的富文本数据,使用正则进行替换处理图片标签,加入自适应属性样式。

您可以直接复制以下封装好的 “健壮” 函数,并按照调用方法进行操作,融入您的项目中。


由于微信小程序不能像 Vue 那样直接在模板上调用函数:

<rich-text :nodes="repairRichText('<b>您的富文本内容</b>')" />

所以您需要在 获取富文本 那块,拿到数据后立马调用处理函数,替换数据。

<!-- text: 通过 repairRichText('富文本内容') 处理好的富文本 --> 

http://www.ppmy.cn/news/357411.html

相关文章

python读取、显示、保存图片的几种方法

目录 读取图像使用opencv读取使用PIL包读取 保存图片显示图片代码总结 读取图像 读取图像我一般采用的有两种方法&#xff0c;如果想要读成numpy数组格式就用opencv方式&#xff0c;想要读成Image对象格式就用PIL包读取。 使用opencv读取 如果是读取灰度图&#xff0c;需要指…

Latex中插入图片

1、Latex的插图 在Latex中使用插图一般有两种方式&#xff0c;一种是插入事先准备好的图片&#xff0c;另一种是使用Latex代码直接在文档中画图。我们一般常见的使用都是第一种&#xff0c;准备好图片&#xff0c;然后直接插入在我们文档当中。只有一些特殊情况需要用大量代码…

前端|加载的图片太多五种优化方法

摘要 web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长. 本篇将针对图片太多或者太大总结几种优化方案. 一.当图片…

安卓图片适配

接着上一篇安卓适配详解之后&#xff0c;本篇文章介绍一下图片的适配&#xff0c;大致分为两个部分&#xff1a; deawable 文件适配.9图片的使用 drawable 首先根据设备的dpi建立相应的文件夹&#xff0c;放置不同大小的图片&#xff0c;如下图&#xff1a; 这里可以看出…

vue导入及使用本地图片

MSite.vue导入本地图片 图片所在位置&#xff1a; 1.直接使用 <template><img src"./image/1.jpg"/> </tempalte>2.data里使用require <template><img :src"imgUrl"> </template> <script> export default …

C++读取图片

C读取图片 以C风格&#xff08;文件流&#xff09;而不是C风格&#xff08;FILE&#xff09;读取图片。 补充&#xff1a;也可以使用opencv的cv::imread()函数读取图片&#xff0c;这个函数返回的是cv:Mat类型&#xff0c;在计算机视觉(CV)领域用的比较多。 使用到的头文件主要…

(Word论文插入高清图片)软件设置教程

文章目录 0. 需求1. 设置Word&#xff0c;避免过度压缩图片2. 导出高清图片2.1 MATLAB2.2 Visio2.3 PPT 3. 导出PDF3.1 利用Word导出功能&#xff0c;创建 PDF3.1.1 优缺点&#xff1a;3.1.2 具体操作&#xff1a; 3.2 利用Word打印功能&#xff0c;选择 Adobe PDF3.2.1 优缺点…

选择图片横向拼接html,一些比较常见的几种组合多张图片的方式

在日常生活中&#xff0c;我们经常会对一些手机中的照片或网上寻找的图片进行处理&#xff0c;以下分享了一些日常比较常见的几种组合高清图片与手机照片的方式以及使用本站的在线工具进行简单的合成处理办法。 一、横向拼接图片 顾名思义&#xff0c;将图片横向拼接为一张图片…