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

我正在使用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>

.现实形象{
位置：绝对位置；
高度：150像素；
宽度：100px；
}
.defaultImage{
高度：150像素；
宽度：100px；
}

请尝试以下代码

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

Javascript

---

您可以使用

对象

标记来放置图像源链接。然后，在该对象内放置一个

img

标记（如果对象中的源图像未加载，则该img将充当拇指邮件）

下面是一个片段，其中对象标记具有有效的图像源

对象，对象*{
宽度：500px；
高度：500px；
}

我添加了一个答案。请检查。请检查更新的回答我尝试了它，但它仅显示我的默认图像。检查是否添加了“显示实际图像”类。如果添加了，则给出一个样式“z-index:1”。我尝试在加载时添加警报，但事件未触发。让我检查一下。我很快会回复。请尝试使用此if编码而不是该事件。。。。它对我有用。。。如果（document.getElementsByClassName（“actualImage”）[0].complete）{$（“.actualImage”）.addClass（“show actual image”）；}或者{$（“.actualImage”）.removeClass（“show actual image”）；}对象标记是否支持跨浏览器？但是当加载图像需要时间时，图像后面没有默认缩略图，它仅在加载图像时出错时才工作

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

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

<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" />

.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;
}

var imgElement = document.getElementsByClassName("actualImage")[0];
if (imgElement.complete) { 
  alert("hi");
  imgElement.className += " show-actual-image";     
}