Broken images in HTML occur when the browser cannot load the referenced image file, resulting in an empty placeholder with an icon (usually a small image symbol or an "x"). This issue negatively affects user experience and can leave the webpage looking incomplete or unprofessional.
These are the following approaches to Fix broken Images in HTML:
Table of Content
Provide a Proper alt Text for Broken Images
The 'alt' attribute is essential for accessibility and enhancing user experience. When an image cannot load, the browser will show the text provided in the 'alt' attribute. This helps users comprehend the intended content of the missing image. Additionally, it plays a crucial role in SEO and accessibility, as screen readers rely on 'alt' text to describe images for visually impaired users.
Syntax:
<img src="gfglogo.png" alt="Description of the image" />Example: This example shows the use of the above-explained approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Using alt Text for Broken Images</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Handling Broken Images with alt Text</h2>
<p>If the image below doesn't load, the
browser will display the alt text.</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231228172727/gfg-image.jpg"
width="300px"
alt="A descriptive fallback for a missing image" />
</body>
</html>
Output:
Use the <picture> Element for Fallback Images
The onerror attribute ensures that if the primary image fails to load, a fallback image will be displayed. This approach's helps if the primary image URL is broken then it displayed alternate image. If primary.jpg is missing, the onerror event triggers and replaces the source with fallback.jpg. The line this.onerror=null; prevents an infinite loop if the fallback image also fails to load.
Syntax:
<img src="gfg.png"
alt="Primary Image"
style="width:300px; height:200px; border:1px solid black;"
onerror="this.onerror=null; this.src='gfglogo.png';" />
Example: This example shows the use of the above-explained approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Image Fallback with onerror</title>
</head>
<body>
<h1>Using onerror to Provide Fallbacks</h1>
<p>If the primary image is missing, the
fallback image will load automatically:</p>
<img src=
"https://media.geeksforgeeks.org/w-content/uploads/20231228172727/gfg-image.jpg"
alt="Primary Image"
style="width:300px; height:200px; border:1px solid black;"
nerror=
"this.onerror=null; this.src='https://media.geeksforgeeks.org/wp-content/uploads/20210224031038/Capture4-300x174.PNG';" />
</body>
</html>
Output:
Conclusion
In this article, we covered two HTML-only approaches to handle broken images effectively:
- Using alt Text Provides a descriptive fallback when the image fails to load, ensuring accessibility.
- Using the <picture> Element Specifies multiple sources and offers a fallback image if the primary one is unavailable.
These techniques ensure that your website remains user-friendly and accessible, even when some images fail to load.