如何让 vue-loader 插入资源 URL？

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

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

如何让 vue-loader 进行插值{{bar}}?

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

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

因此，您应该绑定该值：

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

上面的例子加载了一张图片xxx.jpg从静态目录assets，但还没有通过加载程序。

为了实现这一点，您应该使用动态需求:

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

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

NOTE

如果目录包含大量文件，则不建议这样做，因为 webpack 会加载所有符合您请求的文件（对于上面的示例：./assets/*.jpg).