Question

今天是星期五，这是一个有趣的问题（也是一个真正的问题）。我在图像周围使用边框，但如果图像网址无效，则边框会出现在alt文本周围，看起来很丑陋。如何使用CSS删除它？

<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

Answer 1

您可以使用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

Answer 2

使用.error()，它将事件处理程序绑定到“错误”JavaScript事件。

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

DEMO

Answer 3

由于您是通过服务器端设置的，因此在服务器端修复是正确的，而不是在CSS或JavaScript中。您所要做的就是将代码更改为：

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

Answer 4

<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的解决方案。

Answer 5

我知道这是一个老问题，但这里是使用伪元素的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" />

如果图片网址无效，请从替代文字中删除边框

5 个答案: