从blob加载图像时显示默认和错误图像

问题描述:

我在使用html css的项目中制作图像库。其中我显示blob的图像,我想显示一个默认图像,以便如果由于任何原因我的图像不加载用户将看到默认缩略图和相同的情况下图像不可用blob。从blob加载图像时显示默认和错误图像

我想:

<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> 
+0

我已经添加了1个答案。请检查。 –

+0

请检查更新后的答案 –

请与下面的代码尝试

你的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> 

请CSS属性 “不透明度” 添加到你的风格

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

添加按照脚本t Ø根据您的实际图像可用性

<script> 
    $(".actualImage") 
    .on('load', function() { $(this).addClass("show-actual-image");}) 
    .on('error', function() { $(this).removeClass("show-actual- image");}); 
</script> 

我认为这将帮助您管理透明度....

您可以使用下面的代码也... 它工作正常

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";  
} 
+0

我试过了,但它只显示我的默认图像。 – Sonali

+0

检查是否添加了show-actual-image类。如果它被添加,然后给一个样式“z-index:1” –

+0

我试图通过将警报置于加载但事件不触发。 – Sonali

您可以使用object标签把你的图像源的链接。之后放置一个img标记该对象内的(这IMG将作为thumbmail如果在对象的源图像不加载)

这里是一个代码段,其中所述对象标记具有有效的图像源

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>

下面是其中对象标签具有一个无效的图像源的另一片段(它会回落到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>

+0

对象标签是否支持跨浏览器? – Sonali

+0

是看到https://www.w3schools.com/tags/tag_object.asp – repzero

+0

我已经添加了onclick事件,但它不起作用? – Sonali