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

Question

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

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

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

Answer 1

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>