从 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

请尝试使用以下代码

您的网页

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

添加以下脚本以根据实际图像可用性管理不透明度

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

爪哇语

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

Answer 2

您可以使用

object标记来放置图像源链接。之后在该对象中放置一个img标签(如果对象中的源图像未加载，则此 img 将充当拇指邮件(

下面是对象标签具有有效图像源的代码段

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拇指甲(

object,object *{
  width:500px;
  height:500px;
}

<object data=""  onclick="alert()">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA"/>
</object>