如何在Vue3中将markdown img转换为vue组件？

问题描述

将 markdown 字符串转换为 HTML 内容时，img 将转换为实际的 <img> 标记。

我想要的是允许用户在该图像上click，然后弹出一个模式，用户可以在其中访问更大尺寸的图像。

如果 <img> 标签可以替换为自定义的 Vue 组件，那么一切都会变得更简单。 但我该怎么做？

解决方法

VuePress 2 和 VitePress 都允许您直接在 Markdown 文件中使用 Vue 3 组件。

Vue SFC 的降价示例：

[Home](../README.md)
[About](../about/README.md)

_Hello world_

<img @click="showModal = true" :src="imgUrl">
<MyModal v-if="showModal" />

<script>
import { ref } from 'vue'
import MyModal from '@/components/MyModal.vue'

export default {
  components: {
    MyModal
  },setup() {
    return {
      showModal: ref(false),imgUrl: 'path/to/image'
    }
  }
}
</script>