[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()">`