如何顺利引用Vue的公共目录中的图像？

Question

我正在使用Laravel Mix，我的所有资产都位于公共目录中。这是我当前在文件resource / js / components / Layout / Layout.vue：

中引用图像的方式

<img src="../../../public/images/Logo.png" alt="Logo">

如您所见，一直在写“ ../../”很麻烦。有没有一种方法可以立即引用/public目录？我不能只使用/images/Logo.png，因为资产已在生产环境中上传到云提供商。

我见过人们使用<img src="@/assets/logo.png">，但是@引用了/resources目录。我应该以某种方式创建自己的别名吗？

如何在Vue的公共目录中顺利引用图像？

Answer 1

您需要extend webpack config：

const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '~': path.resolve('path/to/public')  // <-- path to your "public" folder
    }
  }
});

然后您可以通过以下方式引用您的图像：
<img src="~/images/Logo.png" alt="Logo" />

注
您可以将~更改为webpack alias中的其他任何内容。
[path是nodejs built-in module。