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

Question

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

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

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

Answer 1

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

  

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

所以，你应该绑定值：

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

以上示例从静态目录xxx.jpg加载图像assets，但尚未通过加载程序加载。

要实现这一点，您应该使用dynamic require：

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

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

  

注意

     

如果目录包含大量文件，则不建议使用，因为webpack将加载与您的请求匹配的所有文件（对于上面的示例：./assets/*.jpg）。

Answer 2

在属性插值中不允许使用v-bind代替

https://vuejs.org/v2/guide/syntax.html#Attributes