-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
65 lines (48 loc) · 1.81 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
---
title: "HTMLImageElement: Image() constructor"
short-title: Image()
slug: Web/API/HTMLImageElement/Image
page-type: web-api-constructor
browser-compat: api.HTMLImageElement.Image
---
{{APIRef("HTML DOM")}}
The **`Image()`**
constructor creates a new {{DOMxRef("HTMLImageElement")}} instance. It is functionally
equivalent to {{DOMxRef("Document.createElement()", "document.createElement('img')")}}.
> **Note:** This function should not be confused with the CSS [`image()`](/en-US/docs/Web/CSS/image/image) function.
## Syntax
```js-nolint
new Image()
new Image(width)
new Image(width, height)
```
### Parameters
- `width` {{optional_inline}}
- : The width of the image (i.e., the value for the [`width`](/en-US/docs/Web/HTML/Element/img#width)
attribute).
- `height` {{optional_inline}}
- : The height of the image (i.e., the value for the [`height`](/en-US/docs/Web/HTML/Element/img#height)
attribute).
## Usage note
The entire bitmap is loaded regardless of the sizes specified in the constructor. The
size specified in the constructor is reflected through the properties
{{DOMxRef("HTMLImageElement.width")}} and {{DOMxRef("HTMLImageElement.height")}} of the
resulting instance. The intrinsic width and height of the image in CSS pixels are
reflected through the properties {{DOMxRef("HTMLImageElement.naturalWidth")}} and
{{DOMxRef("HTMLImageElement.naturalHeight")}}. If no size is specified in the
constructor both pairs of properties have the same values.
## Examples
```js
const myImage = new Image(100, 200);
myImage.src = "picture.jpg";
document.body.appendChild(myImage);
```
This would be the equivalent of defining the following HTML tag inside the
{{HTMLElement("body")}}:
```html
<img width="100" height="200" src="picture.jpg" />
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}