Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make a placeholder image in HTML if the original image hasn't been found?

Tags:

html

css

Basically what the title says.

I'm making an html page, and using images for link. But can I make it so the images show a default icon if the specified file hasn't been found?

like image 393
StevoHN Avatar asked Oct 02 '15 14:10

StevoHN


People also ask

Why is my IMG not showing in HTML?

You need to either retype your HTML code in upper case: <IMG SRC="MY_IMAGE. GIF"> or you need to rename the file on the server to lower case to coordinate with the HTML page. It is possible that your image files were uploaded correctly to the server, but the server's path to the image is incorrect.

How do I show dummy image not found?

Use alt and title attributes in the <img> tagImage alt text has two main functions: It displays if the image is missing (like the example shown above) or if a user's browser is set to not display images. If someone is visually impaired and using a screen reader, the screen reader will read the alt text aloud.

Can I add image in placeholder HTML?

Whenever you load large image on the page and it's taken too much time, that time you can show loading image or you can say Placeholder image ( Html Image Placeholder ) within the same image tag. You can do this simply by using CSS. Use background property of css and set url of an loading image.

How do I set the default image not found in HTML?

To show a default image if the original image is not found:Add an error event listener to the image. If the image doesn't load successfully, change its src attribute. Optionally, change the image's alt attribute.


1 Answers

You'll have to use javascript:

<img src="404image" onerror="this.src='images/not_found.png';" />
like image 193
x13 Avatar answered Sep 19 '22 15:09

x13