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

最新推荐文章于 2024-03-28 08:31:32 发布
最新推荐文章于 2024-03-28 08:31:32 发布
阅读量2.1k 收藏 3
点赞数 4
分类专栏： 小程序 文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47195437/article/details/131312432
版权

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

2、解决方式：如下

 

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

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

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

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

 .replace(/style="text-wrap: wrap;"/gi,'')

小汪程序猿同学
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
小程序富文本提取图片可放大缩小
11-20
本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码，供大家参考，具体内容如下 启发： 因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小，网上好像不太好找，就写了篇博客，供大家参考 step1 获取到富文本内容，怎么获取就是请求数据嘛，这个不在赘述了。 var nodes = res.data.data.content; step2 检测 nodes中是否有img标签，这个有很多方法，我这里用的indexOf if (nodes.indexOf("src") >= 0) { } step3 第三步就是用正则全局匹配img标签，并且替换成空，这里setData是为了
微信小程序 rich-text 富文本图片自适应最佳处理 附其他方式
lo106258的博客
05-14 2344
方式一：在style中追加max-width:100%;height:auto; ，此方法优点灵活，对于content中所有图片都起作用 // 商品详情html正则追加max-width goodsContentConv(content){ return content.replace(/<(img).*?(\/>|<\/img>)/g, function (mats) { if (mats.indexOf('style') < 0) { ..
小程序 rich-text中图片点击放大与自适应大小问题
weixin_44694538的博客
04-26 483
点击放大 // js data:{ imgarr:[] } // 主要代码 let imgarr = []; let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片 let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片 let arrsImg = o...
uniapp和微信小程序修改rich-text里面图片样式，鸿蒙教程来袭
最新发布
m0_60721649的博客
03-28 1099
+)((?]+)((?]+)((?]+)((?” $1’);
后台获取的富文本文章里面的图片，去除样式
qq_36893984的博客
12-07 949
// 去除图片样式 wx.formatRichText = function(html) { let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/...
uniapp开发微信小程序中图片大小显示不正常
好幸运
12-19 307
【代码】uniapp开发微信小程序中图片大小显示不正常。
小程序----rich-text 中图片和空格的处理
m0_37666587的博客
08-24 1020
图片自适应处理：直接用正则匹配给img增加行内样式 res.data.data.info.content = res.data.data.info.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;margin:12px auto;display:block;" ') 空格不识别的处理：同样是正则增加行内样式 res.data.data.info.content = res.data.data.inf
小程序 rich-text 标签解析图片过大的问题解决
superjackan的博客
12-13 896
定义一个处理数据的函数，data 参数就是后端返回的数据，通过字符串的替换方法来修改内联样式，然后将新的数据返回出去，在小程序异步请求的回调函数中调用这个方法就可以获取处理后的数据，然后再渲染数据就可以了。产生问题的原因就是通过此标签的样式不能使用 css 样式。因为数据直接解析，那么我们可以修改或者处理这个数据来解决问题。解决方法，通过修改数据中的文本内容中的img标签的内联样式来实现。
uniapp解决rich-text 富文本图片过大超出问题
weixin_46319117的博客
11-01 2216
【代码】uniapp解决rich-text 富文本图片过大超出问题。
【uniapp】更改富文本编辑器图片大小
weixin_38673922的博客
07-24 751
注意：后台返回的数据格式，注意看里面有无空的style=“”，若有需把style=""字段删除掉，然后再用replace方法加上样式，否则会不生效。如果没有style=“”，直接进行第二行代码。
uniapp-【rich-text】
if.else.Z
03-23 3885
rich-text 组件内屏蔽所有节点的事件。所以如果内容中有链接、图片需要点击，则不能使用rich-text，此时可在uni-app插件市场搜索parse插件使用。app-nvue的rich-text组件支持链接图片点击 name 属性大小写不敏感 img 标签仅支持网络图片 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 css 样式对 rich-text 中的 class 生效。 nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array
微信小程序rich-text富文本用法实例分析
10-16
主要介绍了微信小程序rich-text富文本用法,结合实例形式分析了微信小程序rich-text富文本插件的功能、用法及相关操作注意事项,需要的朋友可以参考下
富文本解析-微信小程序 rich-text 组件
03-29
微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。 这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但...
uni-app、微信小程序 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式！
06-10
uni-app、微信小程序 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式，进行富文本文件的展示。
详解小程序rich-text对富文本支持方案
10-17
目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件，一个是wxPrase，本篇文章主要介绍了详解小程序rich-text对富文本支持方案，感兴趣的小伙伴们可以参考一下
小程序rich-text组件如何改变内部img图片样式的方法
10-16
主要介绍了小程序rich-text组件如何改变内部img图片样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序rich-text组件中富文本框图片不能自适应
风中追风
02-08 798
用了标签 rich-text 但是图片 莫名超过去，不会自适应问题解决。讲请求到的富文本字符串的img标签，全局匹配一下比替换。
【uni-app】 rich-text 中图片溢出
sayyy的专栏
08-12 2737
前言 Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替） 微信小程序中预览的图片溢出效果（非期望效果） -期望的效果 分析 rich-text 为已封装好的组件。向 rich-text传递参数后，由 rich-text进行展现（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向开发者提供控制 rich-text展现的内容样式的方法。 代码1：图片溢出的代码（
uniapp解析富文本（包含图片）微信小程序+app可用
热门推荐
我的笔记
04-03 1万+
最终效果图： 1、uniapp中，在需要使用的vue界面中 <template> <view class="box"> <view class="title">{{title}}</view> <rich-text :nodes="content" class="content"></rich-text> </view> </template> <script> ex.
修改uniapp的富文本编译rich-text里的图片大小
06-07
同样地，你可以通过修改 `<rich-text>` 标签下的 `nodes` 属性中的每个节点的 `style` 属性来控制富文本中图片的大小。例如，如果你要将某个图片节点的大小设置为 200px x 200px，可以按照以下方式修改 `nodes` 属性： ```html <rich-text :nodes="[ { name: 'img', attrs: { class: 'my-class', style: 'width: 200px; height: 200px;', src: 'http://example.com/image.png' } } ]"></rich-text> ``` 在上面的代码中，我们将 `style` 属性设置为 `width: 200px; height: 200px;` 来控制图片节点的大小。你可以根据需要修改 `style` 属性来控制不同图片节点的大小。注意，你需要指定 `width` 和 `height` 属性，否则图片大小可能会不正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值