javascript：<img> 元素

Original sentence: Https://Wangdoc.Com/javascript/index.Html

<img> element

Outline

<img>Element is used to insert a picture, inherited the main HTMLImageElement interface.

Browser provides a native constructor Imageto generate HTMLImageElementinstances.

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

ImageConstructors can accept two integers as parameters, respectively represent <img>the width and height of the element.

// 语法
Image(width, height)

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

<img>Examples The srcproperty may be defined URL of the image.

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

The newly generated <img>instance is not part of the document. If you want it to appear in your document, you must manually inserted into the document.

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

In addition to the use Imageconfiguration, the following method can be obtained HTMLImageElementinstance.

• document.imagesa member of
• Node selection method (for example document.getElementById) obtained <img>node
• document.createElement('img')Generated <img>node

document.images[0] instanceof HTMLImageElement
// true

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

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

HTMLImageElementExamples addition to Node, Element, HTMLElement interfaces, also has some unique properties. This interface does not define their own methods.

Characteristics related properties

（1）HTMLImageElement.src

HTMLImageElement.srcProperty returns the full URL of the image.

// HTML 代码如下
// <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

HTMLImageElement.currentSrcProperty returns the URL of the image currently being displayed. JavaScript and CSS mediaQuery could change the image being displayed.

(3) HTMLImageElement.alt

HTMLImageElement.altProperties can read and write <img>HTML attributes alt, represent text description of the picture.

（4）HTMLImageElement.isMap，HTMLImageElement.useMap

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

HTMLImageElement.useMapProperty corresponds to <img>HTML attributes element usemap, corresponding to the image represented by the current <map>element.

（5）HTMLImageElement.srcset，HTMLImageElement.sizes

HTMLImageElement.srcsetProperties and HTMLImageElement.sizesattributes, are used to read and write <img>element srcsetattributes and sizesproperties. They are used <img>responsive load element. srcsetProperties can be used alone, but the sizesproperty must be srcsetused in conjunction property.

// HTML 代码如下
// <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, sizesattribute specifies, for less than 320pxthe width of the screen, the image is 280px; for less than 480pxthe screen width of the image 440px; in other cases, the image width 800px. Then, the browser based on the current screen image width, the srcsetproperties closest to the width of the image is loaded.

HTMLImageElement.width，HTMLImageElement.height

widthAttribute represents <img>HTML width heightattribute indicates the height. Both properties are integers returned.

// HTML 代码如下
// <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, these two properties are returned 0.

If the HTML code is not set widthand the heightattributes they return of actual image width and height, i.e., HTMLImageElement.naturalWidthattributes and HTMLImageElement.naturalHeightproperties.

HTMLImageElement.naturalWidth，HTMLImageElement.naturalHeight

HTMLImageElement.naturalWidthAttribute indicates the actual width (in pixels) of the image, HTMLImageElement.naturalHeightthe attribute indicates the actual height. Both properties are integers returned.

If the image has not been specified or not available, these two attributes are equal 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 larger than the width, the set portraitmode.

HTMLImageElement.complete

HTMLImageElement.completeProperty returns a Boolean value indicating whether the chart is loaded. If the <img>element has no srcproperty, also returns true.

HTMLImageElement.crossOrigin

HTMLImageElement.crossOriginAttribute is used to read and write <img>element crossoriginattributes, represent cross-set.

This property has two possible values.

• anonymous: Cross-domain request does not require user authentication (credentials), which is the default.
• use-credentials: Cross-domain requests require user authentication.

// HTML 代码如下
// <img crossorigin="anonymous" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.crossOrigin // "anonymous"

HTMLImageElement.referrerPolicy

HTMLImageElement.referrerPolicyFor reading and writing <img>the elements of the HTML attribute referrerpolicy, image resource request indicates how to handle the HTTP request referrerfield.

It has five possible values.

• no-referrer: Without a referrerfield.
• no-referrer-when-downgrade: If the requested address is not HTTPS protocol, not with the referrerfield, which is the default.
• origin: referrerField is the address of the current page, including the protocol, the domain name and port.
• origin-when-cross-origin: If the address of the current page request is homologous relationship, then the referrerfield with the full path, otherwise it will only contain the protocol, the domain name and port.
• unsafe-url: referrerField contains the address of the current page, in addition to the protocol, the domain name and port, further comprising a path. This setting is unsafe, because leak path information.

HTMLImageElement.x, HTMLImageElement.y

HTMLImageElement.xProperty returns the top left corner of the image with respect to the abscissa, HTMLImageElement.yproperty returns the ordinate.

Event Properties

Image loading is complete, it will trigger onloadattribute specifies the callback function.

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

An error occurred during image loading, trigger onerrorattribute specifies the callback function.

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