Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
The image() object in JavaScript.
The Image object in JavaScript represents an HTML <img> element and allows you to create, manipulate, and load images dynamically without adding them directly to the HTML.
Creating Image Objects
You can create an Image object using the new Image() constructor, optionally specifying width and height:
// Basic image creation let img = new Image(); // With dimensions let imgWithSize = new Image(300, 200);
Properties
The Image object has several important properties:
-
src- Sets or gets the image URL -
width- Sets or gets the image width -
height- Sets or gets the image height -
complete- Returns true when the image has finished loading
Example: Dynamic Image Creation
<!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>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
margin: 20px 0;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin: 10px 5px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>The Image Object in JavaScript</h1>
<div class="result"></div>
<button id="loadBtn">Load Image</button>
<button id="removeBtn">Remove Image</button>
<h3>Click the buttons above to load or remove an image</h3>
<script>
let resEle = document.querySelector(".result");
let loadBtn = document.getElementById("loadBtn");
let removeBtn = document.getElementById("removeBtn");
// Create new image object
let newImage = new Image(400, 250);
newImage.src = "https://picsum.photos/400/250?random=1";
newImage.alt = "Sample Image";
newImage.style.border = "2px solid #ddd";
newImage.style.borderRadius = "8px";
// Load image event
loadBtn.addEventListener("click", () => {
if (!resEle.contains(newImage)) {
resEle.appendChild(newImage);
console.log("Image loaded successfully");
}
});
// Remove image event
removeBtn.addEventListener("click", () => {
if (resEle.contains(newImage)) {
resEle.removeChild(newImage);
console.log("Image removed");
}
});
// Check if image is loaded
newImage.onload = function() {
console.log("Image dimensions:", this.width + "x" + this.height);
};
</script>
</body>
</html>
Image Loading Events
The Image object supports several useful events:
<!DOCTYPE html>
<html>
<head>
<title>Image Events</title>
</head>
<body>
<div id="status">Loading image...</div>
<div id="imageContainer"></div>
<script>
let img = new Image();
let statusDiv = document.getElementById("status");
let container = document.getElementById("imageContainer");
// Set up event handlers
img.onload = function() {
statusDiv.innerHTML = "Image loaded successfully!";
statusDiv.style.color = "green";
container.appendChild(img);
};
img.onerror = function() {
statusDiv.innerHTML = "Failed to load image!";
statusDiv.style.color = "red";
};
// Load the image
img.src = "https://picsum.photos/300/200?random=2";
img.style.maxWidth = "100%";
</script>
</body>
</html>
Common Use Cases
- Preloading images: Load images in the background before displaying them
- Dynamic galleries: Create image elements programmatically
- Image validation: Check if images load successfully before using them
- Responsive images: Dynamically set image sources based on screen size
Conclusion
The Image object provides a powerful way to create and manipulate images dynamically in JavaScript. It's essential for creating interactive web applications that need to load, display, or preload images programmatically.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements