CSS

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属性＆＃34;不透明度＆＃34;你的风格

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

的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缩略图）

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

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

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

2 个答案:

CSS

的Javascript