<img>

Overview

The <img> element is used to insert pictures and mainly inherits the HTMLImageElement interface.

The browser provides a native constructor Image for generating instances of HTMLImageElement.

var img = new Image();
img instanceof Image; // true
img instanceof HTMLImageElement; // true

The Image constructor can accept two integers as parameters, respectively representing the width and height of the <img> element.

// Syntax
Image(width, height);

// usage
var myImage = new Image(100, 200);

The src attribute of the <img> instance can define the URL of the image.

var img = new Image();
img.src = "picture.jpg";

The newly generated instance of <img> is not part of the document. If you want it to be displayed in the document, you must manually insert the document.

var img = new Image();
img.src = "image1.png";
document.body.appendChild(img);

In addition to using the Image construction, the following method can also get the HTMLImageElement instance.

-Member of document.images -The <img> node obtained by the node selection method (such as document.getElementById) -<img> node generated by document.createElement('img')

document.images[0] instanceof HTMLImageElement;
// true

var img = document.getElementById("myImg");
img instanceof HTMLImageElement;
// true

var img = document.createElement("img");
img instanceof HTMLImageElement;
// true

In addition to the Node, Element, and HTMLElement interfaces, the HTMLImageElement instance also has some unique attributes. This interface does not define its own methods.

(1)HTMLImageElement.src

The HTMLImageElement.src property returns the full URL of the image.

// HTML code is as follows
// <img width="300" height="400" id="myImg" src="http://example.com/pic.jpg">
var img = document.getElementById("img");
img.src; // http://example.com/pic.jpg

(2)HTMLImageElement.currentSrc

The HTMLImageElement.currentSrc property returns the URL of the image currently being displayed. Both JavaScript and CSS mediaQuery may change the image being displayed.

** (3) HTMLImageElement.alt **

The HTMLImageElement.alt attribute can read and write the HTML attribute alt of <img>, which means the text description of the image.

(4)HTMLImageElement.isMap,HTMLImageElement.useMap

The HTMLImageElement.isMap attribute corresponds to the HTML attribute ismap of the <img> element, and returns a Boolean value indicating whether the image is part of the server-side image map.

The HTMLImageElement.useMap attribute corresponds to the HTML attribute usemap of the <img> element, which represents the <map> element corresponding to the current image.

(5)HTMLImageElement.srcset,HTMLImageElement.sizes

The HTMLImageElement.srcset attribute and the HTMLImageElement.sizes attribute are used to read and write the srcset attribute and the sizes attribute of the <img> element, respectively. They are used for responsive loading of <img> elements. The srcset attribute can be used alone, but the sizes attribute must be used together with the srcset attribute.

// HTML code is as follows
// <img srcset="example-320w.jpg 320w,
//              example-480w.jpg 480w,
//              example-800w.jpg 800w"
//      sizes="(max-width: 320px) 280px,
//             (max-width: 480px) 440px,
//             800px"
//      id="myImg"
//      src="example-800w.jpg">
var img = document.getElementById("myImg");
img.srcset;
// "example-320w.jpg 320w,
//  example-480w.jpg 480w,
//  example-800w.jpg 800w"

img.sizes;
// "(max-width: 320px) 280px,
//  (max-width: 480px) 440px,
//  800px"

In the above code, the sizes attribute specifies that for screens smaller than 320px, the image width is 280px; for screens smaller than 480px, the image width is 440px; in other cases, the image width is 800px. . Then, the browser will load the image with the closest width to the srcset attribute according to the width of the image under the current screen.

HTMLImageElement.width,HTMLImageElement.height

The width attribute represents the HTML width of <img>, and the height attribute represents the height. Both properties return integers.

// HTML code is as follows
// <img width="300" height="400" id="myImg" src="pic.jpg">
var img = document.getElementById("img");
img.width; // 300
img.height; // 400

If the image has not been loaded, both properties return 0.

If the HTML code does not set the width and height properties, they return the actual width and height of the image, namely the HTMLImageElement.naturalWidth property and the HTMLImageElement.naturalHeight property.

HTMLImageElement.naturalWidth,HTMLImageElement.naturalHeight

The HTMLImageElement.naturalWidth property represents the actual width (in pixels) of the image, and the HTMLImageElement.naturalHeight property represents the actual height. Both properties return integers.

If the image has not been specified or is not available, both of these attributes are equal to 0.

var img = document.getElementById("img");
if (img.naturalHeight > img.naturalWidth) {
  img.classList.add("portrait");
}

In the above code, if the height of the image is greater than the width, it is set to portrait mode.

HTMLImageElement.complete

The HTMLImageElement.complete property returns a boolean value indicating whether the chart has been loaded. If the <img> element does not have the src attribute, it will also return true.

HTMLImageElement.crossOrigin

The HTMLImageElement.crossOrigin attribute is used to read and write the crossorigin attribute of the <img> element, indicating cross-domain settings.

There are two possible values ​​for this attribute.

-anonymous: Cross-domain requests do not require user credentials. This is the default value. -use-credentials: Cross-domain requests require user identity.

// HTML code is as follows
// <img crossorigin="anonymous" id="myImg" src="pic.jpg">
var img = document.getElementById("img");
img.crossOrigin; // "anonymous"

HTMLImageElement.referrerPolicy

HTMLImageElement.referrerPolicy is used to read and write the HTML attribute referrerpolicy of the <img> element, indicating how to process the referrer field of the HTTP request when requesting image resources.

It has five possible values.

-no-referrer: Without the referrer field. -no-referrer-when-downgrade: If the requested address is not HTTPS protocol, there is no referrer field, which is the default value. -origin: The referrer field is the address of the current webpage, including the protocol, domain name, and port. -origin-when-cross-origin: If the requested address is of the same origin with the current webpage, then the referrer field will contain the full path, otherwise it will only contain the protocol, domain name and port. -unsafe-url: The referrer field contains the address of the current web page, in addition to the protocol, domain name, and port, it also includes the path. This setting is unsafe because it will leak path information.

HTMLImageElement.x , HTMLImageElement.y

The HTMLImageElement.x property returns the abscissa of the upper left corner of the image relative to the upper left corner of the page, and the HTMLImageElement.y property returns the ordinate.

Event attributes

When the image is loaded, the callback function specified by the onload property will be triggered.

// HTML 代码为 <img src="example.jpg" onload="loadImage()">
function loadImage() {
  console.log("Image is loaded");
}

When an error occurs during image loading, the callback function specified by the onerror attribute will be triggered.

// HTML 代码为 <img src="image.gif" onerror="myFunction()">
function myFunction() {
  console.log("There is something wrong");
}