Vue.js - 尝试绑定动态图像......我该怎么办？答案

【问题标题】：Vue.js - Trying to bind dynamic images... what should I do?Vue.js - 尝试绑定动态图像......我该怎么办？
【发布时间】：2018-09-28 18:48:02
【问题描述】：

我使用 Vue-CLI 3 和 Webpack 4 开始了一个新项目。一切正常，但由于某种原因我无法绑定图像。我的结构很简单：

<div id="app">
   <div v-for="item in items">
      {{ item.name }}
      <img :src="'../public/images/' + item.img">
   </div>
</div>

然后，我的 items 数组。它来自我在 Vuex 的 Store。

items = [
   {
      name: 'my-name-1',
      img: 'image-1.png'
   },
   {
      name: 'my-name-2',
      img: 'image-2.png'
   },
   {
      name: 'my-name-3',
      img: 'image-3.png'
   }
]

我一直在玩 Webpack，因为我猜问题出在那儿。我改变了一些配置，我用不同的路径（./，../，~/...）进行了测试，但没有任何效果......我做错了什么？提前致谢。

【问题讨论】：

item 超出范围/在 img 中未定义，它只绑定在 v-for div 内，因此 <img .. item.img 将不起作用
对不起，我的错。固定的。这无论如何都行不通。
如果 items = [ 是您的真实代码 - 它无效的 js/json（应该是 {items : [...]}） - 请参阅 here 以获得工作演示

标签： javascript vue.js

【解决方案1】：

要拥有动态图像路径，请使用require()：

<img :src="require('../public/images/' + item.img)">

提示：在 require 参数中保留尽可能少的变化。因此，如果您知道所有图片都将具有扩展名 .png，请执行以下操作：

<img :src="require('../public/images/' + item + '.png')">

当然，字符串item 不应该再有扩展名了。

发生这种情况是因为 webpack 实际上会解析 require() 参数并在捆绑包中包含所有可能匹配它的文件。您的 arg 越具体，webpack 将包含在包中的永远不会使用的文件就越少。

【讨论】：