如何从每个唯一的Firestore文档中检索1个图片URL，并使用该picURL设置img.src

Question

我想进入特定集合中的每个文档，检索一个保存的picURL，然后将src设置为li中的img标记。我尝试过一段代码，它部分有效。它设置了img src，但它是同一个src。我想检索两个(或多个(不同的picURL，并将它们设置为两个(或者多个(唯一的img src。我希望这个问题有道理，它很难解释。我将添加一些图片和代码片段来帮助理解。

Javascript：

var postDocRef = db.collection('posts').doc(uid).collection('userPosts')
postDocRef.get().then(snapshot => {
setupPosts(snapshot.docs)
})
const posts = document.querySelector('.posts');
const setupPosts = (data) => {
let html = '';
data.forEach(doc => {
var docRefIDpost = docRef.id
const post = doc.data();
let li = `
<li class="post">
<div class="title">${post.title}</div>
<div class="content">${post.content}</div>
`;
var imgRef = db.collection('posts').doc(uid).collection('userPosts');
imgRef.get().then(function(snapshot) {

if (snapshot.docs.length > 0) {

let doc = snapshot.docs[0]
const data = doc.data();
const picURL = data.picURL
li += `<img class="img" src="${picURL}">`;         
}
li += "</li><br></br>";
html += li
posts.innerHTML = html;
})
})
}
});

以下是我的数据库结构(集合userPosts，我想进入每个文档的位置((图片(

这就是一个文档的结构。我想在每个文档中检索picURL。(图片(

Answer 1

试试这个解决方案。

var postDocRef = db.collection('posts').doc(uid).collection('userPosts')
postDocRef.get().then(snapshot => {
setupPosts(snapshot.docs)
})
const posts = document.querySelector('.posts');
const setupPosts = (data) => {
let html = '';
data.forEach(doc => {
var docRefIDpost = docRef.id
const post = doc.data();
let li = `<li class="post">
<div class="title">${post.title}</div>
<div class="content">${post.content}</div>`;

li += (post.picURL ? `<img class="img" src="${post.picURL}">` : ``);
li += `</li><br></br>`;
html += li
})

posts.innerHTML = html;
}