JavaScript <img>

概述 

<img>元素用于插入圖片，主要繼承了 HTMLImageElement 接口。

瀏覽器提供一個原生構(gòu)造函數(shù)Image，用于生成HTMLImageElement實(shí)例。

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

Image構(gòu)造函數(shù)可以接受兩個整數(shù)作為參數(shù)，分別表示<img>元素的寬度和高度。

// 語法
Image(width, height)

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

<img>實(shí)例的src屬性可以定義圖像的網(wǎng)址。

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

新生成的<img>實(shí)例并不屬于文檔的一部分。如果想讓它顯示在文檔中，必須手動插入文檔。

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

除了使用Image構(gòu)造，下面的方法也可以得到HTMLImageElement實(shí)例。

• document.images的成員
• 節(jié)點(diǎn)選取方法（比如document.getElementById）得到的<img>節(jié)點(diǎn)
• document.createElement('img')生成的<img>節(jié)點(diǎn)

document.images[0] instanceof HTMLImageElement
// true

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

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

HTMLImageElement實(shí)例除了具有 Node、Element、HTMLElement 接口以外，還擁有一些獨(dú)有的屬性。這個接口沒有定義自己的方法。

特性相關(guān)的屬性 

（1）HTMLImageElement.src

HTMLImageElement.src屬性返回圖像的完整網(wǎng)址。

// HTML 代碼如下
// <img width="300" height="400" id="myImg" src="http://example.com/pic.jpg" rel="external nofollow" >
var img = document.getElementById('img');
img.src // http://example.com/pic.jpg

（2）HTMLImageElement.currentSrc

HTMLImageElement.currentSrc屬性返回當(dāng)前正在展示的圖像的網(wǎng)址。JavaScript 和 CSS 的 mediaQuery 都可能改變正在展示的圖像。

（3）HTMLImageElement.alt

HTMLImageElement.alt屬性可以讀寫<img>的 HTML 屬性alt，表示對圖片的文字說明。

（4）HTMLImageElement.isMap，HTMLImageElement.useMap

HTMLImageElement.isMap屬性對應(yīng)<img>元素的 HTML 屬性ismap，返回一個布爾值，表示圖像是否為服務(wù)器端的圖像映射的一部分。

HTMLImageElement.useMap屬性對應(yīng)<img>元素的 HTML 屬性usemap，表示當(dāng)前圖像對應(yīng)的<map>元素。

（5）HTMLImageElement.srcset，HTMLImageElement.sizes

HTMLImageElement.srcset屬性和HTMLImageElement.sizes屬性，分別用于讀寫<img>元素的srcset屬性和sizes屬性。它們用于<img>元素的響應(yīng)式加載。srcset屬性可以單獨(dú)使用，但是sizes屬性必須與srcset屬性同時使用。

// 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"

上面代碼中，sizes屬性指定，對于小于320px的屏幕，圖像的寬度為280px；對于小于480px的屏幕，圖像寬度為440px；其他情況下，圖像寬度為800px。然后，瀏覽器會根據(jù)當(dāng)前屏幕下的圖像寬度，到srcset屬性加載寬度最接近的圖像。

HTMLImageElement.width，HTMLImageElement.height 

width屬性表示<img>的 HTML 寬度，height屬性表示高度。這兩個屬性返回的都是整數(shù)。

// HTML 代碼如下
// <img width="300" height="400" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.width // 300
img.height // 400

如果圖像還沒有加載，這兩個屬性返回的都是0。

如果 HTML 代碼沒有設(shè)置width和height屬性，則它們返回的是圖像的實(shí)際寬度和高度，即HTMLImageElement.naturalWidth屬性和HTMLImageElement.naturalHeight屬性。

HTMLImageElement.naturalWidth，HTMLImageElement.naturalHeight 

HTMLImageElement.naturalWidth屬性表示圖像的實(shí)際寬度（單位像素），HTMLImageElement.naturalHeight屬性表示實(shí)際高度。這兩個屬性返回的都是整數(shù)。

如果圖像還沒有指定或不可得，這兩個屬性都等于0。

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

上面代碼中，如果圖片的高度大于寬度，則設(shè)為portrait模式。

HTMLImageElement.complete 

HTMLImageElement.complete屬性返回一個布爾值，表示圖表是否已經(jīng)加載完成。如果<img>元素沒有src屬性，也會返回true。

HTMLImageElement.crossOrigin 

HTMLImageElement.crossOrigin屬性用于讀寫<img>元素的crossorigin屬性，表示跨域設(shè)置。

這個屬性有兩個可能的值。

• anonymous：跨域請求不要求用戶身份（credentials），這是默認(rèn)值。
• use-credentials：跨域請求要求用戶身份。

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

HTMLImageElement.referrerPolicy 

HTMLImageElement.referrerPolicy用來讀寫<img>元素的 HTML 屬性referrerpolicy，表示請求圖像資源時，如何處理 HTTP 請求的referrer字段。

它有五個可能的值。

• no-referrer：不帶有referrer字段。
• no-referrer-when-downgrade：如果請求的地址不是 HTTPS 協(xié)議，就不帶有referrer字段，這是默認(rèn)值。
• origin：referrer字段是當(dāng)前網(wǎng)頁的地址，包含協(xié)議、域名和端口。
• origin-when-cross-origin：如果請求的地址與當(dāng)前網(wǎng)頁是同源關(guān)系，那么referrer字段將帶有完整路徑，否則將只包含協(xié)議、域名和端口。
• unsafe-url：referrer字段包含當(dāng)前網(wǎng)頁的地址，除了協(xié)議、域名和端口以外，還包括路徑。這個設(shè)置是不安全的，因?yàn)闀孤┞窂叫畔ⅰ?/li>

HTMLImageElement.x，HTMLImageElement.y 

HTMLImageElement.x屬性返回圖像左上角相對于頁面左上角的橫坐標(biāo)，HTMLImageElement.y屬性返回縱坐標(biāo)。

事件屬性 

圖像加載完成，會觸發(fā)onload屬性指定的回調(diào)函數(shù)。

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

圖像加載過程中發(fā)生錯誤，會觸發(fā)onerror屬性指定的回調(diào)函數(shù)。

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