vue.js Webpack和静态映像（没有vuecli和nodejs开发服务器）

Question

我有一个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 dev服务器。我使用Django并将vuejs应用程序嵌入模板中。

我读过的大多数示例都说明应将其输出到资产目录中，我猜这是通过npm dev服务器提供的。

我最终将如何提供此文件？

也许，有一种方法可以将其嵌入到内部版本中？我确实使用了embed选项，希望将它与/ dist中的main.js合并...但不行。它不是在磁盘上创建的。

感谢阅读！

Answer 1

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

Answer 2

顺便说一句，我用一个简单的技巧解决了我的问题。

我在浏览器中查看了一些视图页面源，并注意到了其他经典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">

因此，仅使用Django静态文件服务，就不再需要进行Webpack调整了。