如何解决为什么img.src不能在每个“ li”中定义img标签的来源?
我想在以下代码的每个“ li”中从Firebase Storage添加图像,但是只有第一个li具有图像。其他img标签上没有定义的src。控制台中没有错误,但是每张图片的picURL已记录在控制台中,但不适用于src
代码:
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();
const li = `
<li>
<div class="title">${post.title}</div>
<div class="content">${post.content}</div>
<img class="img">
</li>
`;
var imgRef = db.collection('posts').doc(uid).collection('userPosts');
imgRef.get().then(function(snapshot) {
if (snapshot.docs.length > 0) {
snapshot.docs.forEach(doc => {
const data = doc.data();
const picURL = data.picURL
console.log(picURL)
var img = document.querySelector(".img")
img.src = picURL
})
} else {
console.log("PicURL doesn't exist")
}
})
html += li
})
posts.innerHTML = html;
}
});
解决方法
问题出在这一行:
var img = document.querySelector(".img")
每次运行时,您都从HTML加载第一个.img
元素。您实际要做的是将图像设置在当前正在构建的li
上。
解决此问题的最简单方法是仅将img
标记添加到循环内的li
:
const setupPosts = (data) => {
let html = '';
data.forEach(doc => {
var docRefIDpost = docRef.id
const post = doc.data();
let li = `
<li>
<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) {
snapshot.docs.forEach(doc => {
const data = doc.data();
const picURL = data.picURL
console.log(picURL)
var img = document.querySelector(".img")
li += `<img class="${picURL}">`;
})
} else {
console.log("PicURL doesn't exist")
}
})
li += "</li>";
html += li
})
posts.innerHTML = html;
}
});
更新的代码:
const setupPosts = (data) => {
let html = '';
data.forEach(doc => {
var docRefIDpost = docRef.id
const post = doc.data();
let li = `
<li>
<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) {
snapshot.docs.forEach(doc => {
const data = doc.data();
const picURL = data.picURL
var img = document.querySelector(".img")
li += `<img class="${picURL}">`;
})
} else {
console.log("PicURL doesn't exist")
}
li += "</li>";
html += li
posts.innerHTML = html;
})
})
}
});
这将在读取每个文档之后更新HTML。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。