Example of how to display a default image when an image does not exist in HTML

An image link <img src="" /> I want to use js to determine whether the url is valid. If it is 404, load the default image path

<img src="xxx" source="this.src=Default image address"/>

onerror event of the image tag img

<img src="pic.gif" background="javascript:this.src='Default image address';" alt="pic" />

Analysis: Pay special attention to onerror. When the image does not exist, onerror will be triggered, and a default image is specified for img in onerror. That is to say, if the picture exists, pic.gif will be displayed, and if the picture does not exist, the default picture will be displayed.

Existing problem: If the default image does not exist, onerror will continue to be triggered, resulting in a loop and an error. If the image exists but the network is very poor, onerror may also be triggered.

Solution: Load the default image through a function and only load it once

<img src="abc.jpg" onerror="nofind()" />
<script type="text/javascript">
function nofind(){
  var img=event.srcElement;
  img.src="upload/2022/web/nlogo0518.png"; //Replaced image img.onerror=null; //Control not to trigger errors all the time}
</script>

This concludes this article about examples of how to display a default image when an image does not exist in HTML. For more information about how to display a default image when an image does not exist in HTML, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. We hope that you will support 123WORDPRESS.COM in the future!