如何在Vuejs中的:src中动态使用源图像

Question

我已经尝试了在谷歌上找到的所有东西，但都不适用。

基本上，我想做的是将一个对象通过v-for传递给另一个组件，比如

<Representante
v-for="(representante, i) in representantes"
:key="i"
:rep="representante"
/>

这个representante变量就是我传递的对象。它有一个imagem属性，其中包含我需要的图像的名称。

重要提示：图像在公用文件夹中，因为我认为它可以工作，但它没有。

在组件脚本中，我有以下内容：

<script>
export default {
props: ['rep'],
data() {
return {
foto: null
}
},
mounted() {
this.foto = '/' + this.rep.imagem;
}
}
</script>

这基本上初始化了data()中的foto属性，因此我可以在<img>标记中使用。

<img :src="foto" :alt="rep.altImagem">

但它根本不起作用，public文件夹和src/assets/文件夹上的图像都不起作用。仅显示alt。我也试过使用require()，但它不是那样工作的，或者我不知道如何使用。

我在互联网上找不到任何关于Vue为什么找不到我的照片的信息。

顺便说一句，这就是我得到的错误：

GET http://localhost:8080/nameOfImage.jpeg [HTTP/1.1 404 Not Found 3ms]

谢谢你的帮助。

Answer 1

如果图像在public文件夹中(而不是像public/assets或public/images这样的子文件夹(，那么这就可以了。

值得检查的几件事：

• 文件名匹配。扩展jpeg与jpg或案例
• 您没有将它们放在public中的子目录中(或将其包含在变量ie:this.foto = '/images/' + this.rep.imagem中

Answer 2

我的解决方案是在远程存储库中添加图像，这样我就可以获得URL并使用它们，这很有效。但我仍然认为我的问题是Vue的怪异行为。