无法使用 vue 添加 img

Question

我不知道为什么这不起作用，只有第一个向我的img收费，其他的没有。

1. <img :src="require('../assets/batatas.jpg')" :alt="item.title" />
2. <img :src="'../assets/batatas.jpg'" :alt="item.title" />
3. <img :src="item.img" :alt="item.title" />

我想使用las，因为我使用自己的json来收取信息费用，但当我尝试放置img时，它只对第一个有效，当我查看网络信息时，我可以看到第一个放这个(src="/img/bataas.79e2929.jpg"(，另外两个放在我的网络上(src="../assets/bataas.jpg"(。

我开始使用vue，我不知道为什么会发生这种情况。

Answer 1

欢迎使用StackOverflow，请确保在询问您的问题之前搜索过类似的问题。避免重复总是很好的。

以下是一个与您的问题/答案相似的问题/回答：Vue.js模板中的静态图像src

您将需要"；要求"；因为您的对象是动态的，Vue需要弄清楚如何将静态资产与构建过程中生成的资产进行映射。这就是(src="/img/batatas.79e29299.jpg")，这个随机数是图像的实际最终结果，用户可以看到。

使用require就像说"；将item.img URL转换为实际的最终结果图像URL"；

Answer 2

我将json更改为img：@@assets/batas.jpg，然后在我的组件中使用<img :src="require('@/assets/' + item.img)" :alt="item.title" />，这对我来说很有效，casioscabral的答案帮助我理解并尝试用这些信息来解决这个问题，感谢所有来这篇文章的人对我的帮助，我真的很感激。