从 VuePress 中的自定义组件链接到图像答案

【问题标题】：Linking to image from cutom component in VuePress从 VuePress 中的自定义组件链接到图像
【发布时间】：2021-07-20 06:51:37
【问题描述】：

我想在我的 VuePress 降价文件中显示图像。通常，我会选择：

![My Image](./resources/myimg.png)

但是，我想创建一个自定义 Vue 组件，以特定方式设置图像样式。然后，一些图像将使用“标准”降价语法（如上）显示，而其他一些图像将使用我的自定义组件。

使用我的自定义组件，我会像这样显示图像：

<MyComponent src="./resources/myimg.png"/>

如您所见，这些图像与我的降价代码一起放置在 resources 目录中。这对我来说很有意义，因为图像接近显示它的降价。不幸的是，当我使用MyComponent 时，图像没有显示出来。 VuePress（webpack？）在构建过程中处理图像并将它们放置在具有不同名称的其他目录中。 “标准” Markdown 图像参考工作正常，它的图像 URL 由 VuePress 正确设置。但是，MyComponent 不起作用，因为src 参数只是 VuePress 的字符串，它不会以任何方式对其进行转换。

我知道一种解决方案是将我的图像放在/vuepress/public 文件夹中。但是，我希望保持与现在相同的组织方式 - 图像和文档。

我怎样才能做到这一点？

【问题讨论】：

标签： vuepress

【解决方案1】：

我遇到了同样的问题。
我使用答案@papey提供了一个Vue问题here

这是他建议的一件事

<template>
    <div id="app">
        <img :src="require('./assets/logo.png')"/>
    </div>
</template>
    
<script>
    export default {
    }
</script>
    
<style lang="css">
</style>

【讨论】：