[TOC] > [查看文檔](https://wangdoc.com/javascript/elements/image.html#%E4%BA%8B%E4%BB%B6%E5%B1%9E%E6%80%A7) ## 概述 ``` var img = new Image(); img.src = 'picture.jpg'; document.body.appendChild(img); img instanceof Image // true img instanceof HTMLImageElement // true ``` ## 獲取 img 節點 * `document.images`的成員 * `document.getElementxxx` 獲取節點 * `document.createElement('img')`生成的`<img>`節點 ## 元素屬性 ### src 圖片路徑 ``` var img = document.querySelector("#img"); console.log(img.src); ``` ### currentSrc 當前正在展示的圖像的網址 ### alt ### isMap / useMap 返回一個布爾值，表示圖像是否為服務器端的圖像映射的一部分 ### srcset / sizes 它們用于`<img>`元素的響應式加載。`srcset`屬性可以單獨使用，但是`sizes`屬性必須與`srcset`屬性同時使用 ### width / height ### x / y x - 屬性返回圖像左上角相對于頁面左上角的橫坐標 y - 屬性返回縱坐標 ### naturalWidth / naturalHeight ### complete 返回布爾 ,圖片是否加載完成 沒有 `src` 則發回true ### crossOrigin 表示跨域設置 這個屬性有兩個可能的值。 * `anonymous`：跨域請求不要求用戶身份（credentials），這是默認值。 * `use-credentials`：跨域請求要求用戶身份。 ``` // <img crossorigin="anonymous" id="myImg" src="pic.jpg"> var img = document.getElementById('img'); img.crossOrigin // "anonymous" ``` ## 事件屬性 ### onload `<img src="example.jpg" onload="loadImage()"> ` ### onerror `<img src="image.gif" onerror="myFunction()">`