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

Question

我想进入特定集合中的每个文档并检索保存的 picURL，然后将 src 设置为 li 中的 img 标签。我尝试了一个代码，它可以部分工作。它设置了img src，但它是同一个src。我想检索两个（或更多）不同的 picURL，并将它们设置为 img src 到两个（或更多）唯一的 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。（图片）

标签： javascripthtmlgoogle-cloud-firestoregoogle-cloud-storage

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;
}