files/en-us/web/api/htmlimageelement/index.md
{{APIRef("HTML DOM")}}
The HTMLImageElement interface represents an HTML {{HTMLElement("img")}} element, providing the properties and methods used to manipulate image elements.
{{InheritanceDiagram}}
Image() constructor creates and returns a new HTMLImageElement object representing an HTML {{HTMLElement("img")}} element which is not attached to any DOM tree. It accepts optional width and height parameters. When called without parameters, new Image() is equivalent to calling {{DOMxRef("Document.createElement()", "document.createElement('img')")}}.Inherits properties from its parent, {{domxref("HTMLElement")}}.
alt HTML attribute, thus indicating the alternate fallback content to be displayed if the image has not been loaded.attributionsrc attribute on an {{htmlelement("img")}} element programmatically, reflecting the value of that attribute. attributionsrc specifies that you want the browser to send an {{httpheader("Attribution-Reporting-Eligible")}} header along with the image request. On the server-side this is used to trigger sending an {{httpheader("Attribution-Reporting-Register-Source")}} or {{httpheader("Attribution-Reporting-Register-Trigger")}} header in the response, to register an image-based attribution source or attribution trigger, respectively.true if the browser has finished fetching the image, whether successful or not. That means this value is also true if the image has no {{domxref("HTMLImageElement.src", "src")}} value indicating an image to load.null if CORS is not used.sync to decode the image synchronously, async to decode it asynchronously, or auto to indicate no preference (which is the default). Read the {{domxref("HTMLImageElement.decoding", "decoding")}} page for details on the implications of this property's values.high to fetch at a high priority, low to fetch at a low priority, or auto to indicate no preference (which is the default).height HTML attribute, indicating the rendered height of the image in CSS pixels.ismap HTML attribute, indicating that the image is part of a server-side image map. This is different from a client-side image map, specified using an `` element and a corresponding {{HTMLElement("map")}} which contains {{HTMLElement("area")}} elements indicating the clickable areas in the image. The image must be contained within an {{HTMLElement("a")}} element; see the ismap page for details.eager) or on an as-needed basis (lazy).0. This is the height the image would be if it were rendered at its natural full size.0. This is the width the image would be if it were rendered at its natural full size.referrerpolicy HTML attribute, which tells the {{Glossary("user agent")}} how to decide which referrer to use in order to fetch the image. Read this article for details on the possible values of this string.sizes HTML attribute. This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the {{domxref("HTMLImageElement.sizes", "sizes")}} page for details on the format of this string.src HTML attribute, which contains the full URL of the image including base URI. You can load a different image into the element by changing the URL in the src attribute.srcset HTML attribute. This specifies a list of candidate images, separated by commas (',', U+002C COMMA). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the {{domxref("HTMLImageElement.srcset", "srcset")}} page for specifics on the format of the size substring.usemap HTML attribute, containing the page-local URL of the {{HTMLElement("map")}} element describing the image map to use. The page-local URL is a pound (hash) symbol (#) followed by the name of the <map> element, such as #my-map-element. The <map> in turn contains {{HTMLElement("area")}} elements indicating the clickable areas in the image.width HTML attribute, indicating the rendered width of the image in CSS pixels."left", "right", "justify", and "center". This is obsolete; you should instead use CSS (such as {{cssxref("text-align")}}, which works with images despite its name) to specify the alignment.Inherits methods from its parent, {{domxref("HTMLElement")}}.
If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the {{domxref("HTMLElement/error_event", "error")}} event, that event handler will get called. This can happen in a number of situations, including:
src attribute is empty or null.src URL is the same as the URL of the page the user is currently on.const img1 = new Image(); // Image constructor
img1.src = "image1.png";
img1.alt = "alt";
document.body.appendChild(img1);
const img2 = document.createElement("img"); // Use DOM HTMLImageElement
img2.src = "image2.jpg";
img2.alt = "alt text";
document.body.appendChild(img2);
// using first image in the document
alert(document.images[0].src);
The following example shows the use of the height and width properties alongside images of varying dimensions:
<p>
Image 1: no height, width, or style
</p>
<p>
Image 2: height="50", width="500", but no style
</p>
<p>
Image 3: no height, width, but style="height: 50px; width: 500px;"
</p>
<div id="output"></div>
const arrImages = [
document.getElementById("image1"),
document.getElementById("image2"),
document.getElementById("image3"),
];
const objOutput = document.getElementById("output");
let strHtml = "<ul>";
for (let i = 0; i < arrImages.length; i++) {
const img = arrImages[i];
strHtml += `<li>image${i + 1}: height=${img.height}, width=${img.width}, style.height=${img.style.height}, style.width=${img.style.width}</li>`;
}
strHtml += "</ul>";
objOutput.innerHTML = strHtml;
{{EmbedLiveSample("getting width and height", "", "300")}}
{{Specifications}}
{{Compat}}