javascript - Vue.js - 尝试绑定(bind)动态图像......我该怎么办？

Question

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

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

然后是我的项目数组。它来 self 在 Vuex 中的商店。

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，因为我猜问题就出在这里。我已经更改了一些配置，我已经使用不同的路径(./、../、~/...)进行了测试，但没有任何效果……我做错了什么？提前致谢。

Answer 1

要有动态图像路径，使用require():

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

---

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

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

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

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