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

Question

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

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

然后，我的项目数组。它来自我在 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)">

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

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

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

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