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

Question

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

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

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

score 4 · Accepted Answer

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

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

所以，你应该绑定值：

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

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

为此，您应该使用动态 require：

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

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

笔记

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

score 0 · Accepted Answer

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

2 回答 2