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

<template>
  <view class="rich-text-wrapper">
    <rich-text :nodes="article" @imgtap="onImageTap"></rich-text>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      // 假设这是从后端获取的含有图片的富文本内容
      article: '<div class="article-content">...</div>'
    };
  },
  methods: {
    onImageTap(event) {
      // 获取点击的图片的src
      const src = event.currentTarget.dataset.src;
      // 可以在这里处理图片的点击事件，例如预览图片等
      // 这里简单打印出图片src
      console.log('Image tap: ', src);
    }
  }
};
</script>
 
<style>
.rich-text-wrapper {
  /* 根据需要添加样式 */
}
</style>

这段代码展示了如何在uniapp中使用rich-text组件来渲染富文本内容，并处理图片点击事件。通过@imgtap事件监听器，我们可以获取到点击的图片的源地址，并根据需要进行处理，例如在新窗口中打开这张图片。