微信小程序rich-text解析出来的图片排列有白线

最新推荐文章于 2022-09-07 15:19:25 发布
最新推荐文章于 2022-09-07 15:19:25 发布
阅读量1.1k 收藏 1
点赞数 3
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44363139/article/details/106787423
版权

最近在做微信小程序开发，遇见商品详情页后台返回来的数据有img，用标签解析后发现呈现出来的图有一道白色的边，

如
解决办法：

<rich-text nodes="{
    {introduction}}" bindtap="tap" class="pro_detailImg"></rich-text>

/* 商品详情图样式 */
<
最低0.47元/天 解锁文章
小美好
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决小程序用rich-text渲染图片会显示白色空隙的问题
liaoxianhua888的博客
03-11 692
html: <rich-text v-if="item.name=='img'" :id="item.attrs.id" class="_img" :style="''+handler.getStyle(item.attrs.style)" :nodes="handler.getNode(item,!lazyLoad||imgLoad)" :data-attrs="item.attrs" @tap="imgtap" @longpress="imglongtap" />...
【无标题】微信小程序 rich-text中多张图片之间存在空白的问题
mumu176699的博客
05-14 453
用 rich-text在微信小程序中显示html时，如果多张图片，每张图片之间，会出现很细的一条空白行。img 标签中，添加属性： vertical-align:middle;网上的方案有些是font-size:0,觉的不太方便。
rich-text解析图片在开发者工具能显示，但真机不显示
前端菜菜DayDayUp的博客
03-14 2813
第一：图片路径问题 最近在做项目的时候，小程序（uni-app）遇到一个问题，rich-text解析本地图片（相对路径）在开发者工具中能显示，但是在真机调试或者发行上线在手机上查看不显示图片，但是也查阅的很多大佬的文档，寻找解决方法； 方法一（本人行不通） 有些大佬是建议使用绝对路径，比如相对路径（../../img/nan.png）----> 绝对路径（/img/nan.png）,这种方法亲测无效（仅是自己观点，各位大佬可以在调研一下）。 方法二（将图片转化为base64格式）--亲测有效
富文本多个图片出现白条
qq_41687299的博客
06-27 752
1、富文本图片宽度过大 2、富文本图片出现空白间隙
微信小程序图片有白框
sinat_23336093的博客
12-17 944
问题：微信小程序 放入一张图片，自适应后，莫名其妙有白框出现 其实有时间就是布局的问题，仔细检查下布局，或者换种方式试下
rich-text标签内文本带图片的图片样式控制问题
qq_36632604的博客
07-21 2301
文本内html标签 有img标签 其中可以通过f12查看img标签内具体类名 class="" 然后style标签追加样式 但是我试过不行 于是可以从全局样式中 修改样式 并加 !important属性 其中我的全局样式在app.vue中 ...
富文本解析-微信小程序 rich-text 组件
03-29
微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。 这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但...
微信小程序rich-text富文本用法实例分析
10-16
微信小程序的`rich-text`组件是用来展示富文本的，它允许开发者在小程序中插入和显示包含HTML元素的复杂文本内容。这个组件从基础库1.4.0版本开始引入，对于低版本的小程序，需要进行一定的兼容性处理。在使用`rich-...
微信小程序 rich-text的使用方法
08-29
在微信小程序中，`<rich-text>`组件是一个用于渲染富文本的组件，...总之，`<rich-text>`组件是微信小程序中处理富文本内容的重要工具，通过理解和熟练运用其属性和规则，可以创建出丰富多样的页面布局和内容展示效果。
将富文本转为微信小程序rich-text组件支持的json格式wxapp-rich-text-master.zip
09-25
在微信小程序开发中，富文本显示是...了解以上知识点后，开发者可以有效地利用`wxapp-rich-text-master`项目来解决在微信小程序中展示富文本的问题。通过合理的转换和使用，可以实现丰富的文本展示效果，提升用户体验。
Android-TextView-富文本-html图片显示.rar
08-13
android下textview 显示html片段，可以显示文字和图片混排，图片可以是网络图片
多张image图片排列有空隙解决方案
03-29
上个项目是卖东西的，商品详情传的组图，排上去后发现每张图片下有大概10+rpx的下边距，显得很不好看。查了一下貌似是小程序的默认样式。没找到解决方案，看到有说用微信编辑器传图的，好像很麻烦就没去试，自己琢磨了两种方法。 原本不做处理的样子：  (此图片来源于网络，如有侵权，请联系删除! )     .det-pics-w image { width: 100%; min-height: 630rpx; }   .det-pics-w { position: relative; } 第一种解决方案：flex   .det-pics-w image { width: 100%; min-heigh
解决在uniapp上开发移动端项目时，因为后台传入的图片渲染到前端出现图片白条的情况
TX9271000911的博客
07-15 896
最后一步在小程序上找到你出现bug图片所在的位置，找到xxx.wxss文件并删除多余的东西。这是小编在使用uniapp开发小程序时出现的问题，下面教小伙伴们怎么解决。解决bug的方法很多，如果这个帮不了你，可以看看其它小编的理解。解决方案使用正则表达式进行一个替换。删除后面的.dataxxxxx。ctrl+s一下大功告成。...
微信小程序自适应图片的时候底部总有一条白色的空白区像一条线该怎么办呢？
徐飞的博客
07-26 2586
微信小程序自适应图片的时候底部总有一条白色的空白区像一条线该怎么办呢？
image图片布局存在空隙的解决办法
huangjielian
08-15 7298
1、将图片转换为块级对象 　　即，设置img为： 　　display:block; 　　在本例中添加一组CSS代码： 　　#sub img {display:block;} 　　2、设置图片的垂直对齐方式 　　即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：
微信小程序 —— 图片自适应后去掉底部的白边
热门推荐
Wu_shuxuan的博客
10-12 1万+
在微信小程序中有一个图片的小bug，当一个image放到一个view中，或者是一个页面放入一个长长的image，宽度和高度的自适应很好实现，但是实现之后图片的底部依旧会有一个白边。例如 - 小图（无需占满整个屏幕的）解决代码 - wxml <view class="free-images"> <image src="{{image_src}}"></image> </view> - wxss
微信小程序(移动端)开发时多img拼接底部留白解决方法
Candy_mi的博客
05-18 3113
1.给图片的包裹元素加属性 font-size: 0; 2.给图片包裹元素加属性 position:relative; //用弹性盒子让图片垂直排列 display:flex; flex-direction:column; 3.给图片...
微信小程序/h5图片拼接出现白线问题
weixin_43452154的博客
09-07 2366
出现白线，可能原因1是图片宽高出现半个像素点，可能原因2布局不为块状布局，导致出现行高咱局部分高度，导致部分手机出现白线，2、 使用flex布局，在父级div用flex布局来设置，将div并列排序展示。1、在父级div加上font-size：0，将图片样式设置成块元素。3、 使用margin-top来占据白线。4、给图片的父容器添加 line-height: 0;
小程序rich-text里多张图片自适应
暖栀的博客
04-19 1万+
&lt;rich-text nodes="{{detail_tb}}"&gt; &lt;/rich-text&gt;这个是wxml里&lt;rich-text&gt;富文本这个写在js里：var _that =this;_that.setData({ detail_tb: res.data.replace(/\&lt;img/gi, '&lt;img style="max-wid...
微信小程序rich-text
最新发布
07-27
微信小程序中的rich-text组件用于展示富文本内容，支持显示HTML标签和样式。你可以在小程序的wxml文件中添加rich-text组件，并在对应的js文件中设置content属性来指定要显示的富文本内容。 例如，在wxml文件中添加rich-text组件： ```html <rich-text nodes="{{content}}"></rich-text> ``` 然后，在js文件中设置content属性，将要显示的富文本内容赋值给它： ```javascript Page({ data: { content: '<div style="color: red;">Hello, <strong>world!</strong></div>' } }) ``` 在上面的例子中，rich-text组件将会显示一个红色的文字"Hello, world!"，并且"world!"会以粗体显示。 需要注意的是，不是所有的HTML标签和样式都被支持。在微信小程序的官方文档中，你可以找到更详细的说明和支持列表。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值