如何在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。