How can I render Images with JavaScript into my HTML

Question

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.

Than you!

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()



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Headline</h1>
    <div id="container">

    </div>


    <script src="index.js"></script>
</body>
</html>

What your script does is not what most people would consider "rendering images" (I was thinking you'd be drawing using Canvas) — Dai
– Dai, Commented Sep 4, 2021 at 18:36
Have you use your browser's JS debugger to investigate the problem? If not, why not? — Dai
– Dai, Commented Sep 4, 2021 at 18:36
You should avoid using innerHTML (it's slow and insecure: it opens you up to XSS vulnerabilities). Instead use document.createElement and appendChild to add new elements to the DOM. — Dai
– Dai, Commented Sep 4, 2021 at 18:37
@Dai innerHTML is insecure, yes, but it is faster than document.createElement especially if you build the HTML string then call innerHTML once. — slebetman
– slebetman, Commented Sep 4, 2021 at 18:39
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. — Hoda Arezoudar
– Hoda Arezoudar, Commented Sep 4, 2021 at 18:40

user16450641 · Accepted Answer · 2021-09-04 20:01:06Z

2

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Headline</h1>
    <div id="container">

    </div>
</body>
</html>

The CSS was added just so you can see where the images are.

answered Sep 4, 2021 at 20:01

user16450641

Sign up to request clarification or add additional context in comments.

1 Comment

Nick_S Over a year ago

Thanks a lot for your help! Now my code works and the images are loaded. :)

Harsh Singh · Accepted Answer · 2021-09-04 18:51:32Z

0

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.

I hope it helps and please pardon my bad english.

edited Sep 4, 2021 at 18:51

answered Sep 4, 2021 at 18:46

Harsh Singh

413 bronze badges

1 Comment

Nick_S Over a year ago

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. :D 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 :)

Victor M. Sarmiento · Accepted Answer · 2021-09-04 19:25:20Z

0

With your code, the result is just one image tag(img): result with your code

You must include the innerHTML inside of the loop: InnerHTML inside the loop

And that's all. HTML result

answered Sep 4, 2021 at 19:25

Victor M. Sarmiento

214 bronze badges

2 Comments

Dmytro Over a year ago

It is better to put code and snippets in your answers, please, avoid using images, especially with code

Community Over a year ago

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution.

Tiernan Crotty · Accepted Answer · 2021-09-04 19:56:44Z

0

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.

answered Sep 4, 2021 at 19:56

Tiernan Crotty

3172 silver badges10 bronze badges

1 Comment

Nick_S Over a year ago

Thanks a lot for your help! I just did not see the spelling mistake... Now everything works! Thank you very much!

Collectives™ on Stack Overflow

How can I render Images with JavaScript into my HTML

4 Answers 4

1 Comment

1 Comment

2 Comments

Another Route to Success

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Another Route to Success

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related