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

已于 2025-01-18 17:21:07 修改
阅读量1w 收藏 8
点赞数 4
CC 4.0 BY-SA版权
分类专栏： + Wechat 文章标签： 微信小程序 rich-text 富文本内的图片变形了 富文本图像宽度不受控 微信小程序rich text
于 2022-05-27 11:29:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/125000611
+ Wechat 专栏收录该内容
122 篇文章 ¥19.90 ¥99.00
订阅专栏
本文提供了一个函数，解决微信小程序中rich-text组件解析富文本时图片无法自适应宽高导致的变形和超出屏幕宽度问题。通过正则替换处理图片标签，实现无需第三方插件的简单快速调整。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

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

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

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

在这里插入图片描述

解决方案

支持 Vue2 / Vue3 语法，对显示

了解本专栏 订阅专栏 解锁全文
uni-app - 完美解决 rich-text 富文本解析图片无法自适应宽高问题，图片超出屏幕宽度且不受控（详细示例源码，简单快速无需任何第三方插件）
资深程序员
07-15 7754
uniapprich-text解析图片变形了怎么办，uniapp富文本解析时img图片渲染超出边界的问题，uniapp渲染富文本图片宽高问题，uniapp使用rich-text加载富文本时,对于富文本中图片的大小处理，vue通过v-html指令渲染的富文本无法修改样式的解决方案，解析富文本图片溢出,超出的问题。uni-apprich-text富文本图片变形了，解决uni-app中富文本rich-text回显图片不自适应展示问题，uniapp富文本rich-text图片适配，Uni-APP
微信小程序rich-text组件中富文本框图片不能自适应
风中追风
02-08 1421
用了标签 rich-text 但是图片 莫名超过去，不会自适应问题解决。讲请求到的富文本字符串的img标签，全局匹配一下比替换。
微信小程序rich-text富文本 图片自适应宽度
热门推荐
决战决胜AI，放眼长期，稳中求进；知行合一，日拱一卒
01-20 1万+
后端处理，最方便 一种方法：接口里给img标签加样式（PHP） $info['contents'] = str_replace("&lt;img ", "&lt;img style='max-width:100%;height:auto;'", $info['contents']); 第二种方法：小程序里给img标签加样式 that.setData({     //富文本内容     con...
微信小程序＜rich-text＞支持里面图片点击放大
最新发布
二豆不要二豆
06-26 392
【代码】微信小程序＜rich-text＞支持里面图片点击放大。
uniapp 小程序 中使用富文本rich-text 图片溢出问题解决方法
m0_55074611的博客
09-04 1796
封装公共函数 tag=true 默认图片最宽为父组件宽度，如果不需要最大宽度为父组件宽度可以给tag传false，通过class控制img的样式。第一步中的richTextImg 函数中已经为img 函数添加了 class类。对于富文本框中的文字可以直接用css 修改标签样式控制，但是图片不行。函数中写入 处理函数richTextImg。可以直接在css 样式中修改 img样式。对于图片 可以使用两种方式进行样式修改。在需要处理的富文本数据处调用。
小程序 rich-text 解析富文本 图片过大时如何自适应？
weixin_45304198的博客
04-23 2209
在微信小程序中，用rich-text 解析后端返回的数据，当图片尺寸太大时，会溢出屏幕，导致横向出现滚动
微信小程序 rich-text img (vue uni-app的 v-html img ) 图片宽度超出最简便解决办法
懒鬼不能懒的博客
06-17 6569
以最简单的方式解决微信小程序 富文本 rich-text 的图片超出问题
uni-app - 解决 rich-text 富文本解析图片无法自适应宽高问题
coldriversnow的专栏
11-28 354
【代码】uni-app - 解决 rich-text 富文本解析图片无法自适应宽高问题。
微信小程序rich-text富文本 图片超出屏幕宽度，自适应解决
杜鲁阳的博客
03-31 8300
微信小程序rich-text富文本图片自适应处理 一、问题描述 微信小程序rich-text标签对于样式定义仅支持style和class，直接指定<img>样式设置图片样式无效。造成<img>图片宽度太大超出显示屏。 如图： 实际图片应如下图显示： 二、解决 使用正则替换处理，添加style属性设置图片宽度 data.content.replace(/\<img...
微信小程序富文本图片超出页面宽度解决方法
m0_66729991的博客
05-07 434
原理： 将富文本内的img设置内联样式宽度最大％
vue / 微信小程序实现富文本(richtext)图片宽度自适应
收集、分享
03-25 975
vue / 微信小程序实现富文本(richtext)图片宽度自适应
微信小程序富文本
04-27
微信小程序富文本微信小程序富文本微信小程序富文本大家可以下载
微信小程序 rich-text的使用方法
08-29
主要介绍了 微信小程序 rich-text的使用方法的相关资料,这里提供属性及方法并实现实例，帮助大家学习理解，需要的朋友可以参考下
微信小程序中富文本解决方法
03-12
微信小程序中不能直接将获取的富文本信息放到页面上展示，此文件即可解决此问题
微信小程序组件之rich-text，转义显示富文本操作
阿里巴啦的博客
12-11 7996
小程序的rich-text组件使用： 接口获取的数控 数据转义后 wxml结构 &amp;amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;view class='in'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;vie
关于微信小程序rich-text中图片宽度超出屏幕范围的解决办法
2401_83104410的博客
07-31 1610
问题描述：在微信小程序写一个富文本展示页面时发现一个问题，就是图片宽度超出范围！看很多博主解决办法都很繁琐，而且很多还都看不懂！经过多变测试得出以下方法。2.在微信开发者工具中，wxss栏标签属性控制器，给src添加宽度属性即可解决。1.2.3.4.5.6.7张图片解决办法的，问题展示与解决办法的图片。1.接口链接使用正则追加样式，标签符和换行符替换完美解决；
微信小程序 rich-text 富文本图片宽度自适应的方法
Lemontree_fu的博客
07-24 3622
在小程序里面 展示商品详情的富文本 会有图片 会显示他原来的宽度 这时候 在手机就溢出了 这里的正确的处理办法是： 把图片的宽度改为手机屏幕对应的宽度 或者 100% uniapp WXML <view class="detail-text"> <rich-text class="rich-box" :nodes="detailDataContent"></rich-text> </view> util.js /** * 处理富文..
微信小程序富文本处理
Aurora_____的博客
11-18 2280
微信小程序富文本处理 wxml页面代码： <rich-text nodes ="{{content.content}}"></rich-text> ts代码： this.setData!({ content: result.data.content.replace(/\<img/gi, '<img class="api-editor-pic"') }); wxss .api-editor-pic { width: 1
微信小程序rich-text富文本图片
这不是我的博客
12-24 5236
背景： 本地做微信小程序项目，后台通过富文本编辑器编辑内容，在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题。 问题一：富文本编辑器中的图片无法展示 <rich-text nodes="{{content}}"></rich-text> 分析原因：照上面写法输出富文本内容，图片加载失败，查看图片路径，发现路径错误 解决方案...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值