微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）

前言

注意：您无法通过直接指定 <img> 标签样式来试图设置为自适应图片。

使用官方 <rich-text> 富文本组件解析时，

当内容包含图片（大图）时显示的结果就会超出屏幕宽度。

解决方案

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

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

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

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

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

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

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）相关推荐

微信小程序webview、渲染富文本
先说点题外话,本来是写在简书上面的文章,现在简书不支持发布了,只能在csdn上上传了.... WebView对于前端开发的小伙伴来讲肯定不陌生,功能是很轻大的,就是一个而普通的html界面.今天主要讲 ...
微信小程序实战之实现富文本编辑器
前言这是我参加掘金启航计划的第三篇文章,这次总结的是实现一个简单的富文本编辑器,相信阅读文章后,观众老爷们,能够实现富文本编辑器,在微信小程序中发布自己的文章,希望观众老爷们多多支持! 1. 实现效 ...
如何在微信小程序中使用wxParser(富文本编辑器)
微信小程序想要展示一篇文章,有图片,有文字,内容是由pc端的富文本编辑器编辑好的,可以使用wxParser插件. **1. 申请使用插件.**在「小程序管理后台 - 设置 - 第三方服务 - 插件管理 ...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
微信小程序获取rich-text（富文本）渲染内容高度，rich-text（富文本）里img 样式设置
1.背景: 在某些场景下,例如在某些详细信息内容展示数据量特别大的时候(有时候特别小),当数据量特别大的时候,需要做展示固定高度,展开更多内容完全展示,收起内容又还原.当内容特别少的时候,例如小于3行 ...
许嵩音乐智能问答系统微信小程序之获取数据及文本分类
许嵩音乐智能问答系统微信小程序之获取数据及文本分类项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱数据获取 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题
微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题
微信小程序解决内层页面分享出去后用户无法通过分享页面返回首页问题本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js o ...

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）

前言

解决方案

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）相关推荐

最新文章

热门文章