Javascript new image class

HTMLImageElement: Image() constructor

The Image() constructor creates a new HTMLImageElement instance. It is functionally equivalent to document.createElement(‘img’) .

Note: This function should not be confused with the CSS image() function.

Syntax

new Image() new Image(width) new Image(width, height) 

Parameters

The width of the image (i.e., the value for the width attribute).

The height of the image (i.e., the value for the height attribute).

Usage note

The entire bitmap is loaded regardless of the sizes specified in the constructor. The size specified in the constructor is reflected through the properties HTMLImageElement.width and HTMLImageElement.height of the resulting instance. The intrinsic width and height of the image in CSS pixels are reflected through the properties HTMLImageElement.naturalWidth and HTMLImageElement.naturalHeight . If no size is specified in the constructor both pairs of properties have the same values.

Examples

const myImage = new Image(100, 200); myImage.src = "picture.jpg"; document.body.appendChild(myImage); 

This would be the equivalent of defining the following HTML tag inside the :

img width="100" height="200" src="picture.jpg" /> 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Create Image Elements in JavaScript

In this JavaScript tutorial, you’re going to learn 14 common scenarios you’ll probably run into, if you have not already when working with images.

Show Image in Plain HTML

img src="https://picsum.photos/200/300" /> 

As you can see, I use the picsum website for demonstration purposes. It lets me get a random image URL with specific dimensions passed at the end of the URL.

Set Src Attribute in JavaScript

const img = document.querySelector("img"); img.src = "https://picsum.photos/200/301"; 

Then, assign an image URL to the src attribute of the image element. Alternatively, you can set a src attribute to the image tag using the square brackets syntax like this:

img["src"] = "https://picsum.photos/200/301"; 

Set Multiple Src Attributes in JavaScript

 // image 1 .  // image 2 .  // image 2 

Using ID or class attribute, you can easily target each image element separately to set a different value to the src attribute which I will cover later in this chapter. Let me show you what 🛑 NOT to do when having multiple static image tags in your HTML page.

const img = document.querySelector("img"); 

In the previous example, I used the querySelector() method to target the image element which works fine for a single image element. To get a reference to all three image elements, we’ll need to use querySelectorAll().

const img = document.querySelectorAll("img"); 

img[0].src = "https://picsum.photos/200/301"; // image 1 img[1].src = "https://picsum.photos/200/302"; // image 2 img[2].src = "https://picsum.photos/200/303"; // image 3 

This works fine, but there is a one problem with this approach. Let’s say you no longer need the first image element and remove it from the HTML code. Guess what? The second and third image elements will end up having the first and second images.

Create Image Element in JavaScript

Create an image element using the createElement() method on the document object. Then, set an image URL to its src attribute.

const img = document.createElement("img"); img.src = "https://picsum.photos/200/301"; document.body.appendChild(img); 

Finally, add the image element to the DOM hierarchy by appending it to the body element. Alternatively, you can use the Image() constructor which creates a new HTMLImageElement instance and it’s functionally is equivalent to document.createElement(“img”). Optionally, you can pass width and height parameters to it.

const img = new Image(100, 200); // width, height img.src = "https://picsum.photos/200/301"; document.body.appendChild(img); 

 width="100" height="200" src="https://picsum.photos/200/301"> 

Add Inline Style to the Image in JavaScript

Using the style property, we can apply style to the image element directly in JavaScript. As you can see in the example below, I’ve applied a border as well as border radius styles to it.

let img = document.createElement("img"); img.src = "https://picsum.photos/200/301"; img.style.border = "10px solid orange"; img.style.borderRadius = "10px"; document.body.appendChild(img); 

Add ID Attribute to the Image in JavaScript

Adding multiple styles to the image element individually would be tedious. Instead, let’s create a new CSS rule inside the style tags or an external CSS file with an ID selector like below.

#img-rounded-border  border:10px solid red; border-radius:10px; > 

As you know, it’s pretty straight forward as the value of the ID attribute should not be duplicated in a single page.

Alternatively, you can invoke the setAttribute() method on the img object with two arguments: the attribute name and the value.

img.setAttribute("id", "img-rounded-border"); 

Add Class Attribute to the Image in JavaScript

Unlike ID attribute, you can add multiple class names in a single image element or the same class name in multiple image elements or combinations of both. Let’s say we have a CSS rule with a class name called .img-rounded-border.

.img-rounded-border  border:10px solid red; border-radius:10px; > 

Then, we can add this class to the image element using the add() method on the classList property passing the class name as an argument. Continue Reading.

Источник

How To Create An Image Element In JavaScript

To create an image element in JavaScript, you can use the createElement() function or the Image() constructor. Specific steps will be covered in this article. Let’s check it out!

Create an image element in JavaScript

We offer the following two methods to help you know how to create an image element in JavaScript:

Using the createElement() method

The createElement() method creates an element node.

Return value:

Node: The created element node.

To create an image element using the createElement() method, we need to set the type parameter to ‘img’. Then, set the src attribute to the image’s URL. Finally, add the newly created image element to the body using the document.body.appendChild() method.

    #img-border < border-radius:15px; margin: 50px; >.img-border    

The example above shows different ways to set attributes for the image element.

Alternatively, you can use the image() constructor to create an image element.

Using the Image() constructor

The image() constructor is used to create a new image element.

• width: The width of the image.
• height: The height of the image.

    .img-border    

Summary

This article has shown how to create an image element in JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer as possible. Thank you for reading!

Maybe you are interested:

Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.

Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP

Источник

HTML DOM Image Object

You can access an element by using getElementById():

Example

Tip: You can also access an element by using the images collection.

Create an Image Object

You can create an element by using the document.createElement() method:

Example

Image Object Properties

Property	Description
align	Not supported in HTML5. Use style.cssFloat instead. Sets or returns the value of the align attribute of an image
alt	Sets or returns the value of the alt attribute of an image
border	Not supported in HTML5. Use style.border instead. Sets or returns the value of the border attribute of an image
complete	Returns whether or not the browser is finished loading an image
crossOrigin	Sets or returns the CORS settings of an image
height	Sets or returns the value of the height attribute of an image
hspace	Not supported in HTML5. Use style.margin instead. Sets or returns the value of the hspace attribute of an image
isMap	Sets or returns whether an image should be part of a server-side image-map, or not
longDesc	Not supported in HTML5. Sets or returns the value of the longdesc attribute of an image
lowsrc	Not supported in HTML5. Sets or returns a URL to a low-resolution version of an image
name	Not supported in HTML5. Use id instead. Sets or returns the value of the name attribute of an image
naturalHeight	Returns the original height of an image
naturalWidth	Returns the original width of an image
src	Sets or returns the value of the src attribute of an image
useMap	Sets or returns the value of the usemap attribute of an image
vspace	Not supported in HTML5. Use style.margin instead. Sets or returns the value of the vspace attribute of an image
width	Sets or returns the value of the width attribute of an image

Standard Properties and Events

The Image object also supports the standard properties and events.

Источник