uniapp开发小程序使用rich-text富文本解析对图片大小处理

7月前作者：小汪程序猿同学分类：Toy博客阅读(29) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp开发小程序使用rich-text富文本解析对图片大小处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、问题：在小程序中使用rich-text富文本解析时图片大小不能自适应而超出屏幕问题。

2、解决方式：如下

<rich-text @click="itemImgHandle"  :selectable="true" :nodes="detailContent || '-'"></rich-text>

这是我绑定的值，在绑定值前，需要先进行对图片数据的处理后再使用即可。

3、接口数据处理方法！！！！！（重点）

小程序富文本图片处理,小程序,uni-app,小程序

.replace(/\<img/gi, '<img style="width:100%;height:auto" ')

.replace(/style="text-wrap: wrap;"/gi,'')文章来源地址https://www.toymoban.com/news/detail-664859.html

到了这里，关于uniapp开发小程序使用rich-text富文本解析对图片大小处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序富文本拓展rich-text

支持解析 style 标签中的全局样式支持自定义默认的标签样式支持自动设置标题若 html 中存在 title 标签，将自动把 title 标签的内容设置到页面的标题上，并在回调 bindparse 中返回，可以用于转发支持添加加载提示可以在 Parser 标签内添加加载提示或动画，将在未加载完成或

2024年02月03日
浏览(22)
微信小程序中rich-text富文本的用法

首先：用普通的方法直接传递是会出错的。item是从接口中拿过来的富文本控制台会提示渲染错误解决办法：用encodeURIComponent转码当然，在接收的地方还要处理一下现在用rich-text标签直接渲染goodDetails 就显示正常了因为一般接口给出来的图片都是像这样的，需要我们去添加

2024年02月14日
浏览(29)
微信小程序 rich-text富文本框怎么设置里面节点的样式

1、在JS中我们获取数据，在没有类名的情况下使用正则匹配你想要添加演示的节点 res[1].data[0].f_content为rich-text里面的节点如图代码：让获取的节点中的图片的最大宽度为100%,高度为auto 初始状态：图片超过div 效果：

2024年02月16日
浏览(28)
【微信小程序】富文本rich-text的图片预览效果的几种方法

使用原生小程序开发，实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护，解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了一个不需要用额外组件或插件的方法：思路：使用正则把图片的

2023年04月08日
浏览(32)
小程序rich-text单行省略

小程序rich-text单行省略返回数据为HTML字符串,需要在rich-text渲染, 需要在一行显示，超出部分进行隐藏 template片段 script方法通过以上方法即可解决参考文档：https://blog.csdn.net/u013611033/article/details/121535633

2024年02月16日
浏览(26)
微信小程序 rich-text 超过 2 行显示省略号

rich-text（富文本），如果想实现文本超过两行变成省略号，常规的 div 可以实现，但因为是在微信小程序中，同时使用的是 rich-text 返回的是富文本，所以不能简单的使用以下代码实现：因为富文本使用的 rich-text 回显的，想着直接对这个标签写上这个 CSS，发现也无法达到想

2024年02月03日
浏览(30)
【uni-app】rich-text的使用

rict-text可以支持部分HTML节点及属性 rict-text的属性如下： nodes 值为 HTML String 时，在组件内部将自动解析为节点列表，推荐直接使用 Array 类型避免内部转换导致的性能下降。App-nvue 和支付宝小程序不支持 HTML String 方式，仅支持直接使用节点列表即 Array 类型，如要使用 HTML

2024年02月13日
浏览(34)
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image

view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-vi

2024年02月15日
浏览(31)
【微信小程序入门到精通】— 这篇看完直接拿下 text 和 rich-text 组件！

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！ 1. text 是一种文本组件 2. text类似于HTML中span标签，

2024年02月10日
浏览(40)
关于微信小程序、字节小程序rich-text中图片宽度超出范围解决办法

微信小程序和字节小程序中的rich-text可以将后台富文本显示在前端，但是当图片过宽时微信小程序中就会超出显示范围，而字节小程序中却不会。（微信开发者是不是该优化下这个控件了）微信小程序中字节小程序中那就解决微信小程序中的显示问题就可以了，可

2024年02月11日
浏览(45)