從blob加載圖像時顯示默認和錯誤圖像

Question

我在使用html css的項目中製作圖像庫。其中我顯示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> 

Answer 1

請與下面的代碼嘗試

你的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";  
} 

Answer 2

您可以使用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>