html - Show default and error image while loading image from blob -

i making image gallery in project using html css. in displaying images blob , want show default image if due reason image not load user see default thumbnails , same in case of image not available on blob.

i tried:

<div>                         <img src="@model.componentdata.imagepath" onclick="openbookread(@model.componentdata.id)" class="actualimage"/>     <img src="@model.componentdata.imagepath" onclick="openbookread(@model.componentdata.id)" class="defaultimage"/> </div>   <style>     .actualimage{         position:absolute;         height:150px;         width:100px;     }     .defaultimage{         height:150px;         width:100px;     } </style> 

please try below code

your html

<div>                         <img src="@model.componentdata.imagepath" onclick="openbookread(@model.componentdata.id)" class="actualimage"/>     <img src="@model.componentdata.imagepath" onclick="openbookread(@model.componentdata.id)" class="defaultimage"/> </div> 

please add css property "opacity" style

<style>    .actualimage {       opacity: 0;       position:absolute;       height:150px;       width:100px;            }    .actualimage.show-actual-image {       opacity: 1;    }   .defaultimage {      height:150px;      width:100px;    } </style> 

add following script manage opacity based on actual image availability

<script>     $(".actualimage")    .on('load', function() { $(this).addclass("show-actual-image");})    .on('error', function() { $(this).removeclass("show-actual- image");}); </script> 

i think you....

you can use following code also... works fine

html

<div class="landscape" style="position: relative;">    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcq_tm3r3oxcwhsfwalnhg0iquq2rqt3pntegsn3u1ydc44lmrwlfa" class="actualimage" />    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:and9gctcb5juidypaqm2dmon9v37fjwhukaecttisorbi-tkegidhb-qzq" class="defaultimage" /> 

css

.landscape {   position: relative;   height: 130px;   width: 198px; } .actualimage, .defaultimage{    position: absolute;    left: 0;    top: 0;    width: 100%;    z-index: 1;  } .actualimage {    opacity: 0; } .actualimage.show-actual-image {    opacity: 1;    z-index: 999; } 

javascript

var imgelement = document.getelementsbyclassname("actualimage")[0]; if (imgelement.complete) {    alert("hi");   imgelement.classname += " show-actual-image";      }