如果圖片url無效，請刪除alt文本的邊框

今天是星期五，這是一個有趣的問題（和一個真正的問題）。我在圖像周圍使用邊框，但如果圖像url無效，邊框將顯示在alt文本週圍，看起來有點醜陋。如何使用CSS刪除它？如果圖片url無效，請刪除alt文本的邊框

<a href="#"> 
    <img src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" /> 
</a>

我不想過度使用服務器端腳本或jQuery。對CSS感興趣。如果沒有可用的CSS解決方案，則歡迎其他解決方案。

我實際的服務器端腳本看起來像這樣

If Not String.IsNullOrEmpty(photoURL) Then 
    photoUrl2="<img src="..." style="border:1px solid #000" alt="BMW for sale">" 
end if

jsfiddle

來源

2014-01-17 Hammad Khan

週五嗯！好的，給它一個黑色的背景和白色的顏色，它的消失; ） –

如何暨？的jsfiddle？ :)這意味着黑色邊框將從圖像中消失，如果圖像是有效的網址。不會解決問題 –

style =「border：1px solid＃000; background：＃000; color：white」這是一個愚蠢的星期五答案...我去86 heu，nop邊界站在o外面（ –

可以使用的onerror和設置邊框

<a href="#"> 
<img src="http://badsrc.com/blah" onerror="this.style.borderWidth=0" style="border:1px solid black" alt="Remove border from this alt text" /> 
</a>

這將是最好不要使用內聯樣式和使用類

jsfiddle

來源

2014-01-17 20:44:13 epascarello

工作正常，但有4秒的超時時間 –

添加邊界onload時，無法加速它，或者讓服務器檢查它是否是有效文件。 – epascarello

is'onerror' javascript。你可以給一個演示嗎？它不適用於我。 –

使用.error()，它將事件處理程序綁定到「錯誤」JavaScript事件。

$("img").error(function() { 
    $(this).css('border', 'none'); 
})

DEMO

來源

2014-01-17 20:45:13 Satpal

+1這也適用。 –

既然你是通過服務器端的設置它，正確的事情上解決這個服務器端，而不是在CSS或JavaScript。所有你需要做的就是改變你的代碼如下：

photoUrl2 = String.Format("<img src='...' style='border:{0}' alt='BMW for sale' />", If(String.IsNullOrEmpty(photoURL), "none", "1px solid #000"))

來源

2014-01-17 20:45:34

照片的網址確實存在！它只是有時可能不會指向一個有效的照片和替代文字將出現 –

我明白了，這仍然是一個很好的服務器端變化的情況下，該網址不存在。 –

<a href="#"> 
<img id="myImage" src="http://badsrc.com/blah" style="border:1px solid black" alt="Remove border from this alt text" /> 
</a> 

<script> 
    var image = document.getElementById('myImage'); // or select based on classes 
    image.onerror = function(){ 
     // image not found or change src like this as default image: 
     image.style.border = "none"; 
    }; 
</script>

這裏是用JavaScript您的解決方案。

來源

2014-01-17 20:49:42

我知道這是一個老問題，但這裏是CSS只採用溶液僞元素

img:after { 
 
    content: attr(alt); 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fff; 
 
}

<img src="//placehold.foo/200x200" alt="Remove border from this alt text" />

來源

2017-07-09 21:46:14 Karadjordje

如果圖片url無效，請刪除alt文本的邊框

回答

相關問題