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
How to repair broken pictures in HTML?
Images play an important role in increasing user interest in content and enriching the appearance of websites. However, broken images can occur due to wrong links, missing files, or server problems, which negatively affects user experience.
In this article, we will explore how to repair broken pictures in HTML using different approaches to ensure graceful handling of image loading failures.
Approaches to Repair Broken Pictures
Using alt Attribute
The alt attribute provides alternative text that displays when an image cannot be loaded. This text describes the image content and maintains accessibility.
Example
The following example demonstrates how the alt attribute provides fallback text when an image fails to load
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Attribute Example</title>
<style>
h1 {
color: #2196F3;
text-align: center;
}
.image-container {
text-align: center;
margin: 20px 0;
}
img {
border: 2px solid #ddd;
padding: 10px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Image with Alt Text</h2>
<div class="image-container">
<img src="/images/nonexistent-image.jpg" alt="This image could not be loaded - TutorialsPoint Logo"/>
</div>
<p>The alt text appears when the image fails to load.</p>
</body>
</html>
The page displays "TutorialsPoint" as a blue heading. Below it, instead of an image, the alt text "This image could not be loaded - TutorialsPoint Logo" appears with a border and background styling.
Using onerror Event
The onerror event dynamically replaces a broken image with a fallback image. This prevents empty spaces and maintains visual flow on the webpage.
Example
The following example shows how to use the onerror event to display a fallback image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onerror Event Example</title>
<style>
h1 {
color: #009688;
text-align: center;
}
.image-container {
text-align: center;
margin: 20px 0;
}
img {
border: 2px dashed #999;
max-width: 200px;
height: auto;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>Automatic Image Fallback</h2>
<div class="image-container">
<img src="/images/broken-link.jpg"
alt="Main Image"
onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2Y0ZjRmNCIgc3Ryb2tlPSIjY2NjIiBzdHJva2Utd2lkdGg9IjIiLz48dGV4dCB4PSIxMDAiIHk9IjU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM2NjYiPkZhbGxiYWNrIEltYWdlPC90ZXh0Pjwvc3ZnPg==';"/>
</div>
<p>If the original image fails, a fallback image displays automatically.</p>
</body>
</html>
The page shows "TutorialsPoint" as a teal heading. Since the original image path is broken, the fallback SVG image displaying "Fallback Image" text in a gray bordered rectangle appears instead.
Using CSS Fallback
CSS can provide background images as fallbacks, offering more styling control and visual consistency when images fail to load.
Example
The following example demonstrates using CSS background images as fallbacks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fallback Example</title>
<style>
h1 {
color: #FF5722;
text-align: center;
}
.image-fallback {
width: 200px;
height: 100px;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
border: 2px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
font-family: Arial, sans-serif;
color: #666;
text-align: center;
}
.image-fallback::before {
content: "?? Image Not Available";
font-size: 14px;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>CSS-Based Fallback</h2>
<div class="image-fallback"></div>
<p>CSS provides a styled fallback when no image is available.</p>
</body>
</html>
The page displays "TutorialsPoint" as an orange heading. Below it, a styled gray gradient box with "?? Image Not Available" text appears, demonstrating a CSS-based fallback approach.
Conclusion
Repairing broken pictures in HTML can be achieved through multiple approaches: the alt attribute provides descriptive text, the onerror event enables automatic image replacement, and CSS offers styled fallbacks. Combining these techniques ensures robust image handling and maintains good user experience even when images fail to load.
379 Views
