即使服务器中没有图像，也会显示CSS3：图标图标（Google Chrome）

Question

.image_main_div{
  position:relative;
  
}

.image_main_div .image_overlay_div{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(0, 0, 0, 0.4);
    z-index:1000;
    position:absolute;
    border:thin black solid;
}

.image_main_div .image_overlay_div .image_div{
}

img{
  position: relative;
    height: 175px;
}


img:before{
  content: ' ';
    display: block;
    height: 175px;
    width: auto;
    background: url(https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png);
    background-repeat: no-repeat !important;
    background-size: 100% 100%;
    background-position: center center;
}

<div class="image_main_div">
  <div class="image_overlay_div">
  <p>Some text</p>
  </div>
  <a class="image_div">
  <img alt="" class="img-full img-responsive" height="175px" width="437px"src="https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png">
  </a>
  
</div>

您好，

我在Google Chrome中遇到了一个奇怪的问题。

我所做的是，当服务器中没有图像时，div会从服务器获取默认图像。我使用img中的 。

现在，div中没有​​图像。我仍然得到图像图标和默认图像。并且div周围有一个边框。

在IE，Mozilla中运行良好。但它在谷歌浏览器中看起来像这样。

我该如何解决？

Answer 1

这是Chrome中的默认行为。而是在onerror处理程序中分配后备图像。

＆＃13;

＆＃13;

  <img src="https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png" 
onerror="this.src='https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png'">

＆＃13;

＆＃13;

＆＃13;

Answer 2

它来自直接服务器，请参阅删除它

https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png

.image_main_div{
  position:relative;
  
}

.image_main_div .image_overlay_div{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: rgba(0, 0, 0, 0.4);
    z-index:1000;
    position:absolute;
  border:0px;
}

.image_main_div .image_overlay_div .image_div{
}

img{
  position: relative;
    height: 175px;
}


img:before{
  content: ' ';
    display: block;
    height: 175px;
    width: auto;
    background: url();
    background-repeat: no-repeat !important;
    background-size: 100% 100%;
    background-position: center center;
background: url(https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png);
}

<div class="image_main_div">
  <div class="image_overlay_div">
  <p>Some text</p>
  </div>
  <a class="image_div">
  <img alt="" class="img-full img-responsive" height="175px" width="437px"src="">
  </a>
  
</div>