Блог

Я хочу добавить изображение из хранилища Firebase в каждый «li» в приведенном ниже коде, но только у первого li есть изображение. В других тегах img нет определенного src. В консоли нет ошибок, но изображение каждого изображения регистрируется в консоли, но оно не будет применяться к 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")
  

Каждый раз, когда это выполняется, вы загружаете первый .img элемент из HTML. Что вы на самом деле хотите сделать, это установить изображение на 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 после чтения каждого документа.