vue3渲染带有自定义组件的字符串

背景

后端返回了一段html字符串。由于网络原因，图片有可能加载不出来。所以想写一个会在图片加载失败后自动重新加载的组件image。 然后通过正则替换img标签 为image标签。再将html字符串渲染到页面上。

代码

首先安装依赖

pnpm install @vue/compiler-dom

具体代码示例：

<template><div id="custom"></div>
</template><script setup lang="ts">
import Image from './components/image.vue' // 自定义Image组件
import { compile } from '@vue/compiler-dom'
import { onMounted, createVNode, openBlock, createElementBlock, createApp, createElementVNode } from 'vue'// 将要渲染的html字符串
const htmlStr = `<div><p>This is Img List!</p><Image src="https://img2.baidu.com/it/u=1337068678,3064275007&fm=253&fmt=auto&app=120&f=JPEG" /></div>
`const compileAndRender = (source: string) => {const { code } = compile(source)const renderFn = new Function('Vue', code)({createVNode,openBlock,createElementBlock,createElementVNode,resolveComponent(name: string) {if (name == 'Image') {return Image}return null},})createApp({ render: renderFn }).mount('#custom')
}onMounted(() => {compileAndRender(htmlStr)
})
</script>

注意：上述代码中htmlStr中的<script> <style>将被忽略。