Why won't the img.src define the source of the img-tag in each "li"?

user_14468205 0
Viewed 92

I want to add an image from Firebase Storage in each "li" in the code below, but only the first li has an image. There is no defined src on the other img tags. No errors in the console, but the picURL of each picture is logged in the console, but it won't apply to the src

Code:

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;

}
});
google-cloud-firestore google-cloud-storage firebase javascript
1 Answers

The problem is in this line:

var img = document.querySelector(".img")

Each time this runs, you are loading the first .img element from the HTML. What you actually want to do is set the image on the li that you are currently building.

The simplest way to fix this is to only add the img tag to the li inside your loop:

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

Updated code:

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

This updates the HTML after each document is read.

user_2091030
Related