uniapp rich-text可以转换img标签吗？如何实现

在uniapp中使用rich-text组件时，能否解析并显示HTML中的img标签？如果可以的话，具体应该如何实现？我尝试直接放入带img标签的HTML内容，但图片没有正常显示，求解决方法。

2 回复

可以。uniapp的rich-text组件支持img标签。在nodes数组中，将img标签作为对象传入，设置src属性即可显示图片。


是的，uni-app 的 rich-text 组件可以解析并渲染 img 标签。但需要注意以下几点：

实现方法：

  1. 基本使用：直接将包含 img 标签的 HTML 字符串传递给 rich-text 组件的 nodes 属性。

    <rich-text :nodes="htmlContent"></rich-text>

    export default {
  data() {
    return {
      htmlContent: '<img src="https://example.com/image.jpg" alt="示例图片">'
    }
  }
}

  2. 本地图片处理：
    如果使用本地图片，需将图片放在 static 目录下，并使用绝对路径：

    <img src="/static/logo.png">

注意事项：

  • 安全性：避免直接渲染不可信的 HTML 内容，防止 XSS 攻击。
  • 样式适配：img 标签的宽度建议设置为 100% 或固定值，避免超出屏幕：
    <img src="..." style="max-width:100%;height:auto;">
  • 网络图片：需确保域名在 manifest.json 的 networkTimeout 或合法域名列表中（仅限微信小程序等平台）。

完整示例：

<template>
  <view>
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: `
        <p>这是一段带图片的内容：</p>
        <img src="https://example.com/image.jpg" style="width:100%;" />
      `
    }
  }
}
</script>

通过以上方式即可在 rich-text 中正常显示图片。

回到顶部