How do you display an image in javascript?

I am trying to display image, through JavaScript, but i can't figure out how to do that. I have following

function image[a,b,c]
{
  this.link=a;
  this.alt=b;
  this.thumb=c;
}

function show_image[]
{
  document.write["img src="+this.link+">"];
}

image1=new image["img/img1.jpg","dsfdsfdsfds","thumb/img3"];

in HTML

I can't figure out where should I put something like image1.show_image[];.

HTML? Or somewhere else...

Brett DeWoody

56.9k28 gold badges135 silver badges183 bronze badges

asked Mar 27, 2011 at 18:43

You could make use of the Javascript DOM API. In particular, look at the createElement[] method.

You could create a re-usable function that will create an image like so...

function show_image[src, width, height, alt] {
    var img = document.createElement["img"];
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the  tag
    document.body.appendChild[img];
}

Then you could use it like this...

Add Google Logo

See a working example on jsFiddle: //jsfiddle.net/Bc6Et/

dash

88.1k4 gold badges50 silver badges71 bronze badges

answered Mar 28, 2011 at 3:20

jessegavinjessegavin

72k27 gold badges137 silver badges164 bronze badges

Thank you... I made small modifications/simplifications. Works as intended.

HTML: Add Image

Javascript:

function addLogo[] { var src = "//i.gifer.com/origin/93/935d72c7bc35828ea93b5898691f28fd_w200.gif"; show_image[src, 124,124, "My Image"]; }

function show_image[src, width, height, alt] {
    var img = document.createElement["img"];
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;
    document.body.appendChild[img];
}

answered Jul 28 at 18:06

HecanetHecanet

4014 silver badges3 bronze badges

HowTo
JavaScript Howtos
Display Image With JavaScript

Created: July-27, 2021

JavaScript is known as the web development language. By using JavaScript, we can make our web page attractive by inserting images into it.

By default, we use the tag in HTML to display images. In the tag, we have a method known as src, which helps get the source of the image that we gave to display. In the src, we have to give the complete path of the image; otherwise, it will raise an error. The width, height of the image also needs to be specified.

JavaScript has its own img tag, which helps us insert an image in our webpage. We can create a reusable function. Here we will be using the img element again but differently.

We will be creating a function called display_image[], which will consist of the parameters like source, width, height, and alt of an image in it. We will be using a createElement[] for creating an element in the function. This way, we can dynamically display images wherever we call this function.

For example,








function display_image[src, width, height, alt] {
    var a = document.createElement["img"];
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild[a];
}
display_image['JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage'];

Output:

The above example displays an image on the webpage based on the provided source. The document.body.appendChild[] function adds the given element to the body of the webpage.

How do I put an image into JavaScript?

Access an Input Image Object You can access an element with type="image" by using getElementById[]: var x = document. getElementById["myImage"]; Tip: You can also access by searching through the elements collection of a form.

What is image [] in JavaScript?

Image[] The Image[] constructor creates a new HTMLImageElement instance. It is functionally equivalent to document. createElement['img'] .

How do you display something in JavaScript?

There are four ways to display text in the browser using JavaScript:.

Using the document. write[] method to write inside the tag..

Using the document. querySelector[] method to replace the content of a specific element..

Using the console. ... .

Using the alert[] method to write text output to the popup box..

How do I display an image?

To display an image, use the tag with the src attribute the way you'd use the href attribute in an tag. It's important to provide the width and height of the image upfront to avoid layout issues and jumping visual effect. Simulate slow Internet connection using Chrome Developer Tools.

See a working example on jsFiddle: //jsfiddle.net/Bc6Et/

How do I put an image into JavaScript?

What is image [] in JavaScript?

How do you display something in JavaScript?

How do I display an image?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề