The problem is that you use an equal sign (=) rather than a plus-equal sign (+=). The plus-equal sign will add the text to the variable, while the equal sign will overwrite the variable.
This line:
getImgs = `<img scr="${imgs[i]}">`
getImgs is being set to the string, the string is not being added to it. You need to change it to something like this:
getImgs += `<img scr="${imgs[i]}">`
(Notice the plus before the equal sign)
This way, the variable will not be completely changed, rather it will be appended to.
Full code:
const imgs = [
"images/p1.jpg",
"images/p2.jpg",
"images/p3.jpg"
]
const container = document.getElementById("container")
function renderImages() {
let getImgs = ""
for (let i = 0; i < imgs.length; i++) {
getImgs += `<img scr="${imgs[i]}">`
}
container.innerHTML = getImgs
}
renderImages()
/* I added css so you can see the images */
img {
border: 1px solid black;
width: 20px;
height: 20px;
background: linear-gradient(90deg, blue, green);
}
The CSS was added just so you can see where the images are.
Solution 2 :
const imgs = [
"images/p1.jpg",
"images/p2.jpg",
"images/p3.jpg"
]; // list of sources of images to be rendered
const container = document.getElementById("container"); // the element that is going to contain those images
const loadImage = url => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img); // resolve the promise if the image has been successfully loaded
img.onerror = () => reject(); // else reject the promise
img.src = url; // set the source only after the event handlers have been set
});
};
const renderImages = async () => {
try {
const loadedImages = await Promise.all(imgs.map(loadImage));
const frag = document.createDocumentFragment();
frag.append(...loadedImages);
container.appendChild(frag);
} catch {
console.error("Couldn't render the images");
}
};
renderImages();
here the loadImage function is used to load the images and it returns a promise that resolves only when the images have been loaded
then in the renderImages function we await until all the images have been loaded then we append all those images to a document fragment so to reduce the number of dom updates, then finally we append that document fragment to the container.
All you have to do is go to your line inside your for loop:
getImgs = `<img scr="${imgs[i]}">`
And change it to
getImgs += `<img src="${imgs[i]}">`
Errors:
You had scr="${imgs[i]}" insead of src="${imgs[i]}". (src instead of scr)
Another issue was getImgs =. That should be +=, because otherwise every time you are making getImgs equal the last img. With +=, you are adding a new image element to getImgs each time, so at the end of the loop getImgs contains all of the img tags.
Another Route to Success
Instead you could rewrite your function to something like this:
function renderImages() {
for (let i = 0; i < imgs.length; i++) {
container.innerHTML += `<img src="${imgs[i]}">`
}
}
Which is perhaps more compact.
Problem :
I want to render Images with JavaScript into my HTML-File. I can’t find the problem, here is my code from the JavaScript and the HTML. Really appreciate when someone can help me.
What your script does is not what most people would consider “rendering images” (I was thinking you’d be drawing using
Comment posted by Dai
Have you use your browser’s JS debugger to investigate the problem?
Comment posted by Dai
You should avoid using
Comment posted by slebetman
@Dai
Comment posted by fatemeh fallahi arezoudar
the code you provided will only add “images/p3.jpg” to your container with 0 width and 0 height. try adding style to your image.
Comment posted by Nick_S
Thanks a lot for your help! Now my code works and the images are loaded. 🙂
Comment posted by Nick_S
I tried your code, and it will load the images. But I am very new into web development, so i cant fully understand your code. 😀 My code works now, it was only a spelling mistake and a small mistake with = and +=. Thanks a lot for your help! Your English isn’t bad, just saying 🙂
Comment posted by Dmytro
It is better to put code and snippets in your answers, please, avoid using images, especially with code
Comment posted by Community
Please provide additional details in your answer. As it’s currently written, it’s hard to understand your solution.
Comment posted by Nick_S
Thanks a lot for your help! I just did not see the spelling mistake… Now everything works! Thank you very much!
