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

Question

I am making a image gallery in my project using html css. In it I am displaying images from blob and I want to show a default image so that if due to any reason my image do not load user will see the default thumbnails and same in the 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>

Answer 1

Please try with 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" to your 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 to manage opacity based on your actual image availability
<script>
$(".actualImage")
.on('load', function() { $(this).addClass("show-actual-image");})
.on('error', function() { $(this).removeClass("show-actual- image");});
</script>
I think this will help you....
You can use following code also...
It 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";
}

Answer 2

You can use an object tag to put your image source link. Afterwards place an img tag inside that object (this img will act as a thumbmail if the source image in the object does not load)
Here is a snippet where the object tag has a valid image source
object,object *{
width:500px;
height:500px;
}
<object data="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTCb5jUiDyPAQM2DmOn9V37FJwHUkaeCTTIsorbI-tKegIDHb-qZQ" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA"/>
</object>
Below is another snippet where the object tag has an invalid image source (it will fall back to the img thumbail)
object,object *{
width:500px;
height:500px;
}
<object data="" onclick="alert()">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA"/>
</object>