如果图像 url 无效，则从 alt 文本中删除边框答案

【问题标题】：Remove border from alt text if image url is not valid如果图像 url 无效，则从 alt 文本中删除边框
【发布时间】：2014-02-07 08:19:17
【问题描述】：

今天是星期五，这是一个有趣的问题（也是一个真正的问题）。我在图像周围使用边框，但如果图像 url 无效，边框会出现在 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

【问题讨论】：

星期五嗯！，好吧，给它一个黑色的背景和一个白色的颜色，它就消失了；）
如何暨？ jsfiddle？ :) 这意味着如果图像是有效的 url，黑色边框也会从图像中消失。解决不了问题
style="border:1px solid #000;background:#000;color:white" 这是一个愚蠢的星期五答案......我去 86 heu，nop 边界站在 o(
codepen.io/anon/pen/ayEwz

标签： javascript jquery asp.net css vb.net

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

【讨论】：

那个加边框onload，没办法加速。或者让服务器检查它是否是一个有效的文件。
是onerror javascript。能给个demo吗？它对我不起作用。
很遗憾，这些解决方案都不能在 Chrome 中运行。

【解决方案2】：

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

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

DEMO

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

照片网址确实存在！它只是有时可能没有指向有效的照片，并且会出现替代文本。
我明白了。在 url 不存在的情况下，这仍然是一个很好的服务器端更改。

【解决方案5】：

我知道这是一个老问题，但这里是使用伪元素的纯 CSS 解决方案

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

 &lt;img src="//placehold.foo/200x200" alt="Remove border from this alt text" /&gt;

【讨论】：