uniapp编写小程序解决富文本渲染图片空白间隙问题

你们好,我是金金金。

image.png

场景

uniapp编写小程序,富文本渲染图片,图片之间有空白间隙

image.png

排查

排查之前我先贴一下代码

image.png

  • 框架:uniapp
  • 语法:vue3
  • 组件库:uview-plus

image.png

我用的组件库里面的富文本解析器, 从后台上传完图片后(wangEditor),在手机上显示图片之间就出现了空白间隔

解决

第一种解决方法

  • 给组件加上 font-size:0 (消除内联元素间的间隔)

image.png

第二种解决方法

  • 将img改为block属性将图片转换为块级对象

image.png

推荐

推荐使用第二种解决方法,第一种解决方案会使富文本当中的文字不能正常显示!!!

  • 编写有误还请大佬指正,万分感谢。

最近更新

  1. TCP协议是安全的吗?

    2024-06-12 06:28:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-12 06:28:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-12 06:28:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-12 06:28:01       18 阅读

热门阅读

  1. CAPL如何在底层模拟TCP Server端建立TCP连接

    2024-06-12 06:28:01       11 阅读
  2. 低代码开发应用:国企数字化转型的思考与探索

    2024-06-12 06:28:01       7 阅读
  3. 项目中常量的定义方式

    2024-06-12 06:28:01       5 阅读
  4. Spark 面试题(四)

    2024-06-12 06:28:01       9 阅读
  5. css常用的伪类有哪些

    2024-06-12 06:28:01       7 阅读
  6. leetcode 11 盛最多水的容器

    2024-06-12 06:28:01       5 阅读