如何让 vue-loader 插入资产网址？答案

【问题标题】：How can I get vue-loader to interpolate asset urls?如何让 vue-loader 插入资产网址？
【发布时间】：2016-10-06 15:46:36
【问题描述】：

我有一张带有动态（插值）src 属性的图像。

<img src="./{{bar}}.jpg"/>

如何让 vue-loader 插入 {{bar}}？

【问题讨论】：

【解决方案1】：

我很确定您的代码会引发警告（未提及）：

[Vue 警告]: src="./{{bar}}.jpg": "src" 属性中的插值将导致 404 请求。请改用 v-bind:src。

所以，你应该绑定值：

<img :src="'/assets/' + bar + '.jpg'">

上面的例子它从静态目录assets 加载一个图像xxx.jpg，但还没有通过加载器。

为此，您应该使用dynamic require：

<img :src="loadImage(name)">

methods: {
  loadImage (imgName) {
    return require('./assets/' + imgName + '.jpg')
  }
}

注意

如果目录包含大量文件，不建议使用，因为 webpack 会加载所有符合您请求的文件（如上例：./assets/*.jpg）。

【讨论】：

Evan Young 在此处对我的问题的回复中详细介绍了以下内容：github.com/vuejs/vue-loader/issues/251#issuecomment-224173671

【解决方案2】：

属性插值是不允许的，用v-bind代替

【讨论】：