How do you display an image using JavaScript?

General Discussions
,
1

Hey folks! I’m a bit confused here. Please help me out!!

I’m trying to display an image through JavaScript but can’t figure out how. I have a constructor function for images and a show_image() function that writes an <img> tag using document.write(). For example:

function image(a, b, c) {
this.link = a;
this.alt = b;
this.thumb = c;
}

function show_image() {
document.write("<img src='" + this.link + "'>");
}

var image1 = new image("img/img1.jpg", "description", "thumb/img3");

Where should I call image1.show_image()?? Inside the HTML or somewhere else? How can I properly implement javascript display image to show the image on button click?

Kindly share your knowledge, it is very much needed here!! Thanks :upside_down_face:

2

Hi @Apurvaugale! It’s great that you are asking such fundamental questions. It would be helpful for many including you.

Using document.write() isn’t generally recommended, especially after the page has already loaded, it can literally overwrite the entire document, which is usually not what you want.

Instead, a much better and more controlled way is to create an <img> element dynamically with JavaScript and then append it to a specific container in your HTML.

For example:

  function show_image() {
  const img = document.createElement('img');
  img.src = this.link;
  img.alt = this.alt;
  document.getElementById('imageContainer').appendChild(img);
}

In your HTML, you’d simply have a div like <div id="imageContainer"></div> where you want the image to appear. Then, you can call image1.show_image() after the page loads or on a button click.

This method gives you precise control over where and when your images appear without the side effects of document.write().

Hope this helps you manage your DOM manipulation more effectively!

3

You can set up a button like

Show Image, but you need to make sure the show_image function is bound to the right object so that this.link works.

One way is to define show_image inside your constructor or use .bind() to keep the context.

Example inside constructor:

function image(a, b, c) {
  this.link = a;
  this.alt = b;
  this.thumb = c;
  this.show_image = function() {
    const img = document.createElement('img');
    img.src = this.link;
    img.alt = this.alt;
    document.getElementById('imageContainer').appendChild(img);
  }
}

Then clicking the button calls it properly.

4

That’s a great way to go about it @richaaroy , however @Apurvaugale,

If you just want to quickly display an image on button click, no need for a constructor. Just do this:

Show Image

Once after the HTML button code above , use the JS script below:

  document.getElementById('showBtn').addEventListener('click', () => {
    const img = document.createElement('img');
    img.src = 'img/img1.jpg';
    img.alt = 'description';
    document.getElementById('imageContainer').appendChild(img);
  });

This way it’s clear and simple, just create the image element and add it where you want it on demand.

This works for me and hope it helps you too :slight_smile: