HTML DOM Image Object

Last Updated : 01 Oct, 2024

The HTML DOM Image object represents an HTML <img> element, allowing for dynamic manipulation of images in the document. This object provides various properties and methods to change image attributes like src, alt, width, height, and more, as well as handling image events such as onload and onerror.

Syntax:

document.getElementById("Image_ID");

This Image_ID is assigned to HTML < image > element.

Properties:

src: Sets the image’s URL.
alt: Provides alternative text in case the image cannot be displayed.
width and height: Set the size of the image.

Example 1: The below example create image dynamically and also change the image.

html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Image Object Example</title>
</head>
<body>
    <button onclick="createImage()">Create Image</button>
    <button onclick="changeImage()">Change Image Source</button>
    <div id="imageContainer"></div>

    <script>
        let img;

        function createImage() {
            // Create a new image element
            img = document.createElement("IMG");
            img.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-39.png";  // Set the source URL
            img.alt = "Image";  // Set alt text
            img.width = 150;  // Set width
            img.height = 150; // Set height

            // Append the image to a container in the document
            document.getElementById("imageContainer").appendChild(img);
        }

        function changeImage() {
            if (img) {
                // Change the image source dynamically
                img.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/20240701150350/JavaScript-Tutorial-copy.webp";
                img.alt = "New Image";
                img.width = 300;  // Adjust width accordingly
            } else {
                alert("Please create the image first.");
            }
        }
    </script>
</body>
  
</html>

Output

create image

Example-2: The Below example get the image url, height and width using image properties.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Get Image Info</title>
</head>

<body>
    <img id="myImage"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240701150350/JavaScript-Tutorial-copy.webp"
        alt="JavaScript Image" width="300" height="141">
    <br>
    <button onclick="getImageInfo()">Get Image Info</button>
    <p id="imageInfo"></p>

    <script>
        function getImageInfo() {
            // Get the image element by its ID
            const img = document.getElementById("myImage");

            // Get image properties
            const imageUrl = img.src;
            const imageWidth = img.width;
            const imageHeight = img.height;

            // Display the image info
            document.getElementById("imageInfo").textContent =
                `Image URL: "${imageUrl}",
                Width: ${imageWidth}px, 
                Height: ${imageHeight}px`;
        }
    </script>
</body>

</html>

Output:

Image info

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge
Safari
Opera

HTML DOM TransitionEvent propertyName Property

PranchalKatiyar

Improve

Article Tags :

HTML DOM Image Object

Syntax:

Properties:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?