如何让 vue-loader 插入资产 url？

Question

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

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

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

Answer 1

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

[Vue warn]: src="./{{bar}}.jpg": interpolation in "src" attribute will cause a 404 request. Use v-bind:src instead.

因此，您应该绑定值：

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

上面的示例从静态目录 assets 加载图像 xxx.jpg，但尚未通过加载器加载。

为此，您应该使用 dynamic require:

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

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

NOTE

It is not recommended if the directory contains a large number of files, because the webpack will be load all the files which match your request (for the above example: ./assets/*.jpg).

Answer 2

在不允许属性插值的情况下，请改用 v-bind

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

如何让 vue-loader 插入资产 url？

How can I get vue-loader to interpolate asset urls?

vue.js

vue-loader