Javascript Vue项目可以'；使用时无法找到图像<；a href>；但在使用时可以找到它<；img>；

我有一个Vue项目。我所做的就是运行

vue create foo

，并在运行该命令时删除src文件夹中所有预先创建的代码。然后，我在src文件夹中添加了一个图像，并创建了自己的

App.vue

，这就是我在其中编写的全部内容

<template>
  <div>
    <img alt="Vue logo" src="./foo.png">
    <a href="./foo.png" download>foo</a>
  </div>
</template>

<script>
export default {
}
</script>

导出默认值{
}

然后，当我使用

npm run service

进行尝试时，网站显示的图像非常好，但下载链接不起作用。它表示服务器没有请求的文件或其他内容。

Vue loader，但默认情况下，它不会对链接执行相同的操作

如果您需要直接链接到一个文件，您可以将其放在

public/

目录中以绕过webpack（使用相对于该目录的路径——即，对于

public/foo/bar.jpg中的文件，您可以通过更改选项将
用于模块请求，就像它使用图像src URL一样：

当它在公共场合时，我该如何引用它？好的一点，我应该在答案中包含它，我现在已经添加了它。
/* Add to vue.config.js */
module.exports = {
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-loader")
            .loader("vue-loader")
            .tap(options => {
                // modify the options...
                options = Object.assign(options, {
                    transformAssetUrls: {
                        a: "href"
                    }
                });
                return options;
            });

    }
}