Vue中如何顺利引用public目录下的图片？

Question

我正在使用 Laravel Mix，我的所有资产都在 public 目录中。这是我目前在文件 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中顺利引用public目录下的图片？

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.

Vue中如何顺利引用public目录下的图片？

How can smoothly I reference images in the public directory in Vue?

vue.js

laravel-mix