Image Placeholder
Solution 1
you can hide that using following:
<img
src="my.png"
onerror="this.style.display='none'"
/>
you can display another image if image not found as follow:
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
Solution 2
Solution with 1x1 empty png
function ImgError(source){
empty1x1png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
source.src = "data:image/png;base64," + empty1x1png;
source.onerror = "";
return true;
}
<img src="someimage.png" onerror="ImgError(this);"/>
Solution 3
A simple solution would be to use, literally, a placeholder blank image. This is generally used for sprites but I think you could use this as well.
What you do is, you create a 1x1 px blank gif image with transparency enabled, direct the "src" atrribute to the blank.gif and give the images via the css background-image property. Therefore, even if the background image is not found, it won't show the broken link image.
Solution 4
It's a feature of some browsers - as far as I can recall, Firefox, Chrome and Safari show nothing while Internet Explorer shows a broken image icon. Short of using Javascript, I don't believe you can override this behaviour.
Pradyumna Challa
I am a mechanical engineer with a enthusiasm towards programming and web developing.
Updated on August 11, 2020Comments
-
Pradyumna Challa over 3 years
I have defined the image tag with a background color so that if there is no image the color should show but still the broken image icon is showing how to remove that ?
I dont want to make the page bulky by adding jquery or any framework , also i cant add any kind of divs to images because the site is almost done.
Found the answer with only javascript
function ImgError(source){ source.src = "/images/noimage.gif"; source.onerror = ""; return true; } <img src="someimage.png" onerror="ImgError(this);"/>