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)">

提示：在require args中保留尽可能少的变体。因此，如果您知道所有图片都具有扩展名.png，请执行：

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

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

这是因为webpack实际解析了require()参数，并在包中包含了可能匹配它的所有文件。你的arg越具体，webpack就会包含在包中的永不使用的文件越少。

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

1 个答案: