# <img> 元素
## 概述
`<img>`元素用于插入图片，主要继承了 HTMLImageElement 接口。
浏览器提供一个原生构造函数`Image`，用于生成`HTMLImageElement`实例。
```javascript
var img = new Image();
img instanceof Image // true
img instanceof HTMLImageElement // true
```
`Image`构造函数可以接受两个整数作为参数，分别表示`<img>`元素的宽度和高度。
```javascript
// 语法
Image(width, height)
// 用法
var myImage = new Image(100, 200);
```
`<img>`实例的`src`属性可以定义图像的网址。
```javascript
var img = new Image();
img.src = 'picture.jpg';
```
新生成的`<img>`实例并不属于文档的一部分。如果想让它显示在文档中，必须手动插入文档。
```javascript
var img = new Image();
img.src = 'image1.png';
document.body.appendChild(img);
```
除了使用`Image`构造，下面的方法也可以得到`HTMLImageElement`实例。
- `document.images`的成员
- 节点选取方法（比如`document.getElementById`）得到的`<img>`节点
- `document.createElement('img')`生成的`<img>`节点
```javascript
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`实例除了具有 Node、Element、HTMLElement 接口以外，还拥有一些独有的属性。这个接口没有定义自己的方法。
## 特性相关的属性
**（1）HTMLImageElement.src**
`HTMLImageElement.src`属性返回图像的完整网址。
```javascript
// 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.currentSrc`属性返回当前正在展示的图像的网址。JavaScript 和 CSS 的 mediaQuery 都可能改变正在展示的图像。
**（3）HTMLImageElement.alt**
`HTMLImageElement.alt`属性可以读写`<img>`的 HTML 属性`alt`，表示对图片的文字说明。
**（4）HTMLImageElement.isMap，HTMLImageElement.useMap**
`HTMLImageElement.isMap`属性对应`<img>`元素的 HTML 属性`ismap`，返回一个布尔值，表示图像是否为服务器端的图像映射的一部分。
`HTMLImageElement.useMap`属性对应`<img>`元素的 HTML 属性`usemap`，表示当前图像对应的`<map>`元素。
**（5）HTMLImageElement.srcset，HTMLImageElement.sizes**
`HTMLImageElement.srcset`属性和`HTMLImageElement.sizes`属性，分别用于读写`<img>`元素的`srcset`属性和`sizes`属性。它们用于`<img>`元素的响应式加载。`srcset`属性可以单独使用，但是`sizes`属性必须与`srcset`属性同时使用。
```javascript
// 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`。然后，浏览器会根据当前屏幕下的图像宽度，到`srcset`属性加载宽度最接近的图像。
## HTMLImageElement.width，HTMLImageElement.height
`width`属性表示`<img>`的 HTML 宽度，`height`属性表示高度。这两个属性返回的都是整数。
```javascript
// HTML 代码如下
// <img width="300" height="400" id="myImg" src="pic.jpg">
var img = document.getElementById('img');
img.width // 300
img.height // 400
```
如果图像还没有加载，这两个属性返回的都是`0`。
如果 HTML 代码没有设置`width`和`height`属性，则它们返回的是图像的实际宽度和高度，即`HTMLImageElement.naturalWidth`属性和`HTMLImageElement.naturalHeight`属性。
## HTMLImageElement.naturalWidth，HTMLImageElement.naturalHeight
`HTMLImageElement.naturalWidth`属性表示图像的实际宽度（单位像素），`HTMLImageElement.naturalHeight`属性表示实际高度。这两个属性返回的都是整数。
如果图像还没有指定或不可得，这两个属性都等于`0`。
```javascript
var img = document.getElementById('img');
if (img.naturalHeight > img.naturalWidth) {
img.classList.add('portrait');
}
```
上面代码中，如果图片的高度大于宽度，则设为`portrait`模式。
## HTMLImageElement.complete
`HTMLImageElement.complete`属性返回一个布尔值，表示图表是否已经加载完成。如果`<img>`元素没有`src`属性，也会返回`true`。
## HTMLImageElement.crossOrigin
`HTMLImageElement.crossOrigin`属性用于读写`<img>`元素的`crossorigin`属性，表示跨域设置。
这个属性有两个可能的值。
- `anonymous`：跨域请求不要求用户身份（credentials），这是默认值。
- `use-credentials`：跨域请求要求用户身份。
```javascript
// 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 协议，就不带有`referrer`字段，这是默认值。
- `origin`：`referrer`字段是当前网页的地址，包含协议、域名和端口。
- `origin-when-cross-origin`：如果请求的地址与当前网页是同源关系，那么`referrer`字段将带有完整路径，否则将只包含协议、域名和端口。
- `unsafe-url`：`referrer`字段包含当前网页的地址，除了协议、域名和端口以外，还包括路径。这个设置是不安全的，因为会泄漏路径信息。
## HTMLImageElement.x，HTMLImageElement.y
`HTMLImageElement.x`属性返回图像左上角相对于页面左上角的横坐标，`HTMLImageElement.y`属性返回纵坐标。
## 事件属性
图像加载完成，会触发`onload`属性指定的回调函数。
```javascript
// HTML 代码为 <img src="example.jpg" onload="loadImage()">
function loadImage() {
console.log('Image is loaded');
}
```
图像加载过程中发生错误，会触发`onerror`属性指定的回调函数。
```javascript
// HTML 代码为 <img src="image.gif" onerror="myFunction()">
function myFunction() {
console.log('There is something wrong');
}
```
- 前言
- 入门篇
- 导论
- 历史
- 基本语法
- 数据类型
- 概述
- null，undefined 和布尔值
- 数值
- 字符串
- 对象
- 函数
- 数组
- 运算符
- 算术运算符
- 比较运算符
- 布尔运算符
- 二进制位运算符
- 其他运算符，运算顺序
- 语法专题
- 数据类型的转换
- 错误处理机制
- 编程风格
- console 对象与控制台
- 标准库
- Object 对象
- 属性描述对象
- Array 对象
- 包装对象
- Boolean 对象
- Number 对象
- String 对象
- Math 对象
- Date 对象
- RegExp 对象
- JSON 对象
- 面向对象编程
- 实例对象与 new 命令
- this 关键字
- 对象的继承
- Object 对象的相关方法
- 严格模式
- 异步操作
- 概述
- 定时器
- Promise 对象
- DOM
- 概述
- Node 接口
- NodeList 接口，HTMLCollection 接口
- ParentNode 接口，ChildNode 接口
- Document 节点
- Element 节点
- 属性的操作
- Text 节点和 DocumentFragment 节点
- CSS 操作
- Mutation Observer API
- 事件
- EventTarget 接口
- 事件模型
- Event 对象
- 鼠标事件
- 键盘事件
- 进度事件
- 表单事件
- 触摸事件
- 拖拉事件
- 其他常见事件
- GlobalEventHandlers 接口
- 浏览器模型
- 浏览器模型概述
- window 对象
- Navigator 对象，Screen 对象
- Cookie
- XMLHttpRequest 对象
- 同源限制
- CORS 通信
- Storage 接口
- History 对象
- Location 对象，URL 对象，URLSearchParams 对象
- ArrayBuffer 对象，Blob 对象
- File 对象，FileList 对象，FileReader 对象
- 表单，FormData 对象
- IndexedDB API
- Web Worker
- 附录：网页元素接口
- a
- img
- form
- input
- button
- option
- video，audio