I saved some image src into firebase database. I retrieved them, but now I want to input each of them into separate image tags.

Question

firebase.database().ref("hollywood").on("child_added", (snapshot) => {

var name = snapshot.val().src

$("#movieimage").attr("src", name)
snapshot.forEach(function (data) {
var val = snapshot.val().src
var sake = $("#movieimage").attr("src", val); })
$("#movieimage").append("<br>")

})
//The problem is that only the last src value takes the image. I understand why that is the result but i want each of them to appear in separate image tags. I am completely out of ideas any help pls.

Answer 1

Instead of $("#movieimage")

You need to create the image elements dynamicly based on the number of elements in the src data array, and append them in a div container.

Answer 2

Based on your code bit, now your problem is that only one image is shown in your website, and this image is the last one you upload to Firebase, am I right?

There are three steps to fix it:

1. Instead of listening on child_added event, you should get all data from /hollywood/ and store them in a JS array variable.

2. In HTML, instead of a img element, you should use a div element.

3. use document.createElement() to create new image elements, in the for loop code block, which loops over the src array.

Answer 3

Please provide your code to help me better understand what you want.

Answer 4

I'll answer your question on WhatsApp :), this is a very complex question

Answer 5

Gordon I do not really understand your logic can you please explain more

Answer 6

Gordon Thank you for your answer!