vue.js webpack 和静态图片（没有 vue cli 和 node js 开发服务器）答案

【问题标题】：vue.js webpack and static images (without vuecli and nodejs dev server)vue.js webpack 和静态图片（没有 vue cli 和 node js 开发服务器）
【发布时间】：2019-04-09 21:39:23
【问题描述】：

我有一个 vue.js 单文件组件，我想在其中引用 src 标记中的图像。

类似这样的：

 <img class="mr-4" v-if="item.picture_file" v-bind:src="item.picture_file">
 <img class="mr-4" v-else src="./idavatar.png">

我已经阅读了有关 webpack 文件加载器的信息。所以我在我的 webpack 配置文件中添加了这个。

{
    test: /\.(png|svg|jpg|gif)$/,
    use: [ 
      {
        loader: 'file-loader',
        options: {
          emitFile: true,
        },
      }
    ]
  }

如果我将图像文件放在我的入口目录中，它会被处理然后输出到输出目录中。和其他 js 文件一样。

但是，当检查网页时：

我不使用 vuecli 或 npm 开发服务器。我使用 Django 并将 vuejs 应用程序嵌入到模板中。

我读过的大多数示例都说明它应该在资产目录中输出，我猜它是通过 npm 开发服务器提供的。

我怎么能最终提供这个文件？

也许，有办法将它嵌入到构建中？我确实使用了 emit 选项，希望它会与 /dist 中的 main.js 合并……但不是。它只是没有在磁盘上创建。

感谢阅读！

【问题讨论】：

标签： django vue.js webpack static

【解决方案1】：

顺便说一句，我通过一个简单的 hack 解决了我的问题。

我在浏览器中查看了一些视图页面源代码，并注意到了为其他经典 django 静态资产提供的路径。

应该是这样的：/static/<name-of-the-app>/img

然后插入到我的组件中：

<img class="mr-4" v-if="item.picture_file" v-bind:src="item.picture_file">
<img class="mr-4" v-else src="/static/<name-of-the-app>/img/default-avatar.png">

因此不再需要对 webpack 进行调整，只需使用 Django 静态文件服务即可。

【讨论】：

【解决方案2】：

我建议使用Django Webpack loader，因为您使用的是 django 和 webpack。

【讨论】：