找不到源的图片要么什么都不显示,要么显示一个 [ ? ] 样式的框。您可以将它替换为一个您确信存在的“图片丢失”图形,以便更好地直观地反馈出问题所在。或者,您可能想完全隐藏它。这是可能的,因为浏览器找不到的图片会触发一个我们可以监听的“错误” JavaScript 事件。
// Replace source
$('img').on("error", function() {
$(this).attr('src', '/images/missing.png');
});
// Or, hide them
$("img").on("error", function() {
$(this).hide();
});
此外,您可能希望触发某种 Ajax 操作,以便在发生这种情况时向网站管理员发送电子邮件。
虽然这很不错,而且我不知道图片在无法加载时会抛出错误,但是这种代码块的用处似乎很低,而且有点繁重(在页面上的每个 img 上附加一个事件监听器)用于不应该经常发生的事件。
我能想到一个用处,那就是在创建 UGC 时,用户上传了一张图片,你可以尝试显示这张图片,如果它已被服务器处理,如果没有,则显示一个占位符。
根据我的经验,Chrome 和 Firefox 能够识别出图片未加载并将其记录到控制台,其他浏览器我不确定。
嗨,
我是来自钦奈(印度)的 Chandru...
你有一个很棒的网站,每一个作品对我来说都很有用,
继续努力,伙计...
我真的想在我的网站上实现这一点,但是一些图片是通过 PHP 脚本渲染的,而这段代码不知何故隐藏了这些图片。有人可以帮我吗?我不喜欢那个丑陋的小图标出现。我有一个图像放在渲染图像应该出现的位置,以防它无法渲染,因为它试图拉取一个 Minecraft 皮肤,如果用户没有上传,默认值不会被渲染。
哎呀,没事了。现在可以了。我只是玩了一点,就搞定了。
希望你提供了解决方案,因为我遇到了同样的问题。
令人遗憾的是,这在 IE 中不起作用 - 即使在 IE 9 中也是如此。
太棒了!解决了我的错误 :)
不,它在第二次看的时候没有 :((
我的菜单悬停时出现图片丢失图标,我该如何处理?
它不适用于背景图片。
如果是这种情况,您需要在脚本中添加一些内容。
在 Chrome 中(忘记提了)
嗨,大家好,我似乎无法让它工作。代码应该是什么样的,我应该把它放在 head 之前还是 body 的 cose 中?
我之前也做了一些类似的事情,但后来我发现这是一个糟糕的选择。
图片损坏并不总是由无效 URL 或文件不存在造成的,也可能是由临时网络问题或连接速度慢造成的。
通过更改损坏图片的 image src,用户将无法看到真实的 scr(右键单击 - 查看图片信息)。隐藏损坏的图片更糟糕,因为它完全不可见。
因此,我的解决方案是让浏览器保持损坏的图片,并向图片添加一个重新加载图片的点击事件。
对于某些浏览器,您可能需要指定尺寸和边框
.broken-image {width: 16px !important; height: 16px !important; border: 1px solid #aaa;}
,否则图片将不可见。并在图片加载时删除该类。我不知道该把这段代码粘贴在哪里,
你能告诉我更多细节吗?
实际上是在你的 CSS 样式表中,但我认为发布这个是一个非常糟糕的主意。
为什么不尝试使用 background-image: url(whatever_image_name_is.jpg);。
如果你不需要空白,那么如果图片没有正确加载,背景图片就会在那里,而不是使用 Jquery 隐藏或替换图片。
开发者会完全理解我的意思。
我来自尼日利亚的 Precious Tom...
$(document).ready(function() {
$(“img”).error(function() {
$(this).hide();
});
});
...然后它等待网站完全加载,之后隐藏 imgs。
可能会导致闪烁,但肯定可以隐藏所有需要隐藏的。
嗨,Sakknekedro,
很棒的解决方案,但是你可以很容易地避免你注意到闪烁,方法是不要等到文档“准备好”再隐藏图片。
好吧,为什么它不渲染 markdown 代码块?
这正是我不知道我需要的!不过,我做了一些修改.... 这样原始来源仍然可见,右键单击应该可以工作。
JS
CSS
noImg {
position: relative;
border: 1px solid lightgrey;
background-image: url(http://sirsyedcollege.org/wp-content/themes/EducationAcademy/images/no-image_980x516.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-size: contain;
height: 75px;
width: 126px;
content: "";
margin: 0 10px 10px 0;
}
简写
.noImg {
position: relative;
border: 1px solid lightgrey;
background: url(http://sirsyedcollege.org/wp-content/themes/EducationAcademy/images/no-image_980x516.jpg) 50% 50%/contain no-repeat;
height: 75px;
width: 126px;
content: "";
margin: 0 10px 10px 0;}
PS!
图片来源,请用你自己的替换 :)
忘记给
Sakknekedro
署名了在 Safari 6.0.5 中,如果你不使用背景图片,而只使用背景颜色,则使用
content: ""
时width
和height
不会有任何效果。由于content: ""
是这里隐藏?
图标和内部白色轮廓的关键因素,所以如果你只需要一个自定义大小的背景占位符,这就可以了。我疯狂地试图禁用损坏图片上的白色轮廓,当时我的 Last.fm 脚本没有找到专辑封面,所以,很高兴我找到了这篇文章。
我认为 error 已被弃用?在 jQuery 1.8 以上版本中不起作用?
这些天(从 jQuery 1.7 开始,我认为)你会想要做类似的事情
这样做会为 img 子元素附加一个事件监听器到文档,而不是原始方式,它为每个图片元素附加一个监听器。
不幸的是,这不起作用,因为浏览器不会冒泡错误。
http://stackoverflow.com/a/18683695/18706
对于所有 AngularJS 用户来说,这是一个有趣的解决方案...
WidgetApp.directive(‘img’, function(){
return {
restrict:’E’,
link:function(scope,element){
element.error(function(){
$(this).hide();
})
}
}
});
抱歉,我点击了“发送”,然后才检查它是否可以正常渲染。
很棒的小修复。但是你如何防止闪烁?
我用它来显示用户的默认图片,如果他们没有上传图片(他们的图片位置没有图片数据)。
这对我有效,谢谢!但我还需要将这段代码放到图片上才能生效。
Guy Mograbi,感谢您的 Angular 代码!
这可能适用于找不到的图片,但被阻止的图片呢?我注意到,如果由于某种原因图片被阻止(例如,混合 SSL 内容),这种方法就不好使——只在 Firefox 中有效。为了让它生效,我让函数在页面加载后,延迟 10 毫秒执行;偶尔会造成闪烁,但可以很好地处理所有损坏的图片。
我的代码
在所有浏览器中都有效。
非常感谢,兄弟,你解决了这个大问题。
感谢 Eitz,这对我有效!
请注意,如果 src 为空,则 Firefox 不会触发错误事件。在这种情况下,它仍然会呈现缺少的图片占位符。
请不要使用 Eitz 的建议。
如何从控制台隐藏错误?
对我来说,第一次加载时它没有生效,只有刷新页面后才生效。但当我做了以下更改后,它就开始生效了:
$(window).load(function () {
$(‘img’).each(function () {
if (!this.complete || typeof this.naturalWidth == “undefined” || this.naturalWidth == 0) {
// 如果图片损坏,则用新图片替换
this.src = ‘/Images/no_picture.gif’;
}
});
});
请注意,如果 src 为空,则 Firefox 不会触发错误事件。在这种情况下,它仍然会呈现缺少的图片占位符。
请不要使用 Eitz 的建议。
非常有用,谢谢!
您还可以使用 .htaccess 重写规则将缺少的文件重定向到其他资源,例如 这里 所建议的。
如果您使用特定的文件夹结构,您还可以为特定路径提供特定的替换,例如
此外,我添加了一个响应头,它包含 307 的重定向,用于 SEO,这样做正确吗?
是的,先生!这是对我唯一有效的解决方案。+1
这些解决方案很棒,但我可能要对第一个示例进行一个小改动。我会将
更改为
如果由于任何原因找不到 missing.png 文件,浏览器将陷入无限的错误处理事件循环中。为了避免这种情况,请将事件设置为仅运行一次,然后取消绑定。
这仅适用于元素,并且如果脚本在图片错误抛出之前执行。除非您确保在图片之前同步加载您的脚本,否则这并不是一个完全可靠的方法。
来自 http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript#1978021
另一种方法是通过创建一个内存中的图片元素并将它的 src 属性设置为原始图片的原始 src 属性来触发 onload 和/或 onerror 事件。以下是一个示例,说明我的意思
如果您最终来到了这里,请知道图片的 onerror 函数已被弃用。 https://mdn.org.cn/en-US/docs/Web/HTML/Element/img#Browser_compatibility
这种情况怎么办
<img src="/fail-source-image.jpg" onerror="/fail-fallback-source-image.jpg">
两张图片都加载失败了。这会不会导致循环加载,因为 “onerror” 一直存在?也就是说,两张图片都是 “*.webp”,而你使用的是 Safari。
你们对下面的代码有什么看法,我知道它有些问题,但还是……我找不到。
谢谢。
<img src="/fail-source-image.jpg" data-src="" onerror="if(!this.dataset.load) {this.src='/fail-fallback-source-image.jpg'; this.dataset.load = 1 }">
很危险,请确保默认图片存在。否则会无限调用。
这在 iframe 中也能生效吗?
谢谢!这在 Safari、Firefox 和 Chrome 中都有效。
很酷的帖子!
你能发一篇关于损坏图片样式的文章吗?
我在网上看过其他帖子,我知道这是可能的,但我希望看到你的版本 :)
现在我从你的网站上找到的每个解决方案都有效,并且非常有效,我只是想感谢你的辛勤工作。
非常感谢