Show Image Not found using CSS

Hi, Welcome to CodeHunters. Today I will show a simple CSS trick to replace the default “Image Not found” with Some beautiful design.

lets get started.

Create a simple html with a image tag with source any non-existing url.

<html>
	<head>
	<style>
	</style>
	</head>
	<body>
		<div style="width: 200px;">
			<img alt="Image while dispatching" src="https://nonexistingurl/test.png">
		<div>
	</body>
</html

We will see the output like this, which is looking very bad.

Now lets change the code and see the new look.

<html>
	<head>
	<style>
		.BoardCardCoverImage:before {
			background: #f1f1f1;
			border: 1px solid #ccc;
			border-radius: 3px;
			line-height:150px;
			text-align:center;
			content: '\1F517' attr(alt-alt);
			display: block;
			position: absolute;
			height:150px;
		}
	</style>
	</head>
	<body>
		<div style="width: 200px;">
			<img class="BoardCardCoverImage"  alt="Image while dispatching" alt-alt="No Image available" src="https://nonexistingurl/test.png">
		<div>
	</body>
</html

Now you can see the difference. Enjoy Coding.

Thanks for reading.