+ 3

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

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.

23rd Dec 2021, 4:37 AM
Xavier Christian
Xavier Christian - avatar
6 ответов
+ 3
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.
23rd Dec 2021, 5:11 AM
Gordon
Gordon - avatar
+ 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.
23rd Dec 2021, 2:28 PM
Gordon
Gordon - avatar
+ 2
Please provide your code to help me better understand what you want.
23rd Dec 2021, 3:49 PM
SAN
SAN - avatar
+ 2
I'll answer your question on WhatsApp :), this is a very complex question
24th Dec 2021, 8:55 PM
LIONEL
LIONEL - avatar
+ 1
Gordon I do not really understand your logic can you please explain more
23rd Dec 2021, 9:46 AM
Xavier Christian
Xavier Christian - avatar
0
Gordon Thank you for your answer!
28th Feb 2024, 11:16 AM
Xavier Christian
Xavier Christian - avatar