[英]How to return a div with an image element for each document in a firestore collection
I have a bunch of documents containing links to a bunch of different images in a firestore collection.我有一堆文档,其中包含指向 firestore 集合中一堆不同图像的链接。 I would like to display an image on my screen for every document in the collection.我想在我的屏幕上为集合中的每个文档显示一个图像。
Code: (Mildly fragmented because I don't wanna upload my whole project)代码:(有点零散,因为我不想上传我的整个项目)
async function DisplayImageData()
{
const querySnapshot = await getDocs(collection(db, "users", userUID, "images"));
querySnapshot.forEach((doc) => {
return(
<img src={doc.image} />
);
});
}
It should be stated that I have actually gotten the get/upload part of this process working, so I know that isn't the problem.应该指出,我实际上已经使该过程的获取/上传部分正常工作,所以我知道这不是问题所在。
async function DisplayImageData()
{
const querySnapshot = await getDocs(collection(db, "users", userUID, "images"));
return <>(querySnapshot.map((doc) => {
return(
<img src={doc.image} />
);
}))</>;
}
You have to do something like that.你必须做那样的事情。 Because now the entire list has been returned instead of a single component inside.因为现在返回的是整个列表,而不是里面的单个组件。
To fix your issue, you need to return something like:要解决您的问题,您需要返回如下内容:
<img src={doc.data().image} />
Because the data you want to use is inside the return object of doc.data().因为你要用的数据在doc.data()的返回对象里面。 Also you need to use a map instead of a forEach as you can not return something from a forEach function.此外,您还需要使用地图而不是 forEach,因为您无法从 forEach 函数返回某些内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.