Vue3中innerHTML无法渲染图片怎么办？-html教程-PHP中文网

Vue3中innerHTML无法渲染图片怎么办？

心靈之曲

发布： 2025-02-25 15:38:22

原创

600人浏览过

Vue3中innerHTML无法渲染图片怎么办？

vue3 使用 innerhtml 渲染图片问题及解决方案

在Vue3中，直接使用innerHTML可能会导致图片无法正常显示。这里提供两种有效的解决方法：

方法一：利用动态组件

通过v-html指令结合动态组件，可以更安全有效地渲染包含图片的HTML内容。这种方法避免了直接操作innerHTML带来的潜在风险。

示例代码（需根据实际情况调整）：

立即学习“前端免费学习笔记（深入）”；

<code class="vue"><template>
  <div>
    <component :is="dynamicComponent" :htmlContent="htmlContent"/>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const htmlContent = ref('@@##@@'); //  此处替换为你的图片路径
    const dynamicComponent = computed(() => 'img-component'); // 组件名称

    return { htmlContent, dynamicComponent };
  }
};
</script></code>

登录后复制

你需要创建一个名为img-component的子组件，该组件接收htmlContent作为props，并渲染其内容。这将确保Vue能够正确地处理图片的渲染过程。