如何解决如何从每个唯一的Firestore文档中检索一个图片网址,并使用该picURL设置img.src?
我想进入特定集合中的每个文档并检索保存的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;
})
})
}
});
This is how one document is structured. I want to retrieve the picURL in every document. (image)
解决方法
尝试此解决方案。
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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。