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では正常に動作します。 Google Chromeではこのように見えます。

どうすれば解決できますか？それは、直接サーバから来て

Answer 1

。代わりに、onerrorハンドラで代替画像を割り当てます。

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

Answer 2

は削除見ることChromeのデフォルトの動作です

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>