jQuery / JavaScript来replace破碎的图像

我有一个包含一堆图像的网页。 有时图像不可用，所以在客户端的浏览器中显示破碎的图像。

如何使用jQuery获取图像集，将其过滤为破碎的图像，然后replacesrc？

---

– 我认为使用jQuery来做这件事会容易些，但是使用纯粹的JavaScript解决scheme，也就是Prestaul提供的解决scheme，要容易得多。

Answer 1

处理图像的onError事件以使用JavaScript重新分配其源代码：

 function imgError(image) { image.onerror = ""; image.src = "http://img.dovov.comnoimage.gif"; return true; } 

 <img src="image.png" onerror="imgError(this);"/> 

或者没有JavaScriptfunction：

 <img src="image.png" onError="this.onerror=null;this.src='http://img.dovov.comnoimage.gif';" /> 

以下兼容性列表列出了支持错误工具的浏览器：

http://www.quirksmode.org/dom/events/error.html

Answer 2

我使用内置的error处理程序：

 $("img").error(function () { $(this).unbind("error").attr("src", "broken.gif"); }); 

error()在1.8或更高版本中被弃用。

Answer 3

如果像我这样的人试图将error事件附加到一个dynamic的HTML img标签，我想指出的是，有一个问题：

显然，在大多数浏览器中， img错误事件不会冒泡 ，与标准所说的相反。

所以，像下面这样的东西是行不通的 ：

 $(document).on('error', 'img', function () { ... }) 

希望这会对别人有帮助。 我希望我在这里看到这个线程。 但是，我没有。 所以，我正在添加它

Answer 4

这是一个独立的解决scheme：

 $(window).load(function() { $('img').each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { // image was broken, replace with your new image this.src = 'http://www.tranism.com/webloghttp://img.dovov.combroken_ipod.gif'; } }); }); 

Answer 5

我相信这就是你所追求的： jQuery.Preload

以下是演示中的示例代码，指定加载和未find的图像，然后全部设置：

 $('#images img').preload({ placeholder:'placeholder.jpg', notFound:'notfound.jpg' }); 

Answer 6

 $(window).bind('load', function() { $('img').each(function() { if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) { $(this).attr('src', 'missing.jpg'); } }); }) 

资料来源： http ： //www.developria.com/2009/03/jquery-quickie—broken-images.html

Answer 7

我找不到适合我需要的脚本，所以我做了一个recursion函数来检查破损的图像，并尝试每四秒重新加载它们，直到它们被修复。

我把它限制为10次，就好像它没有加载，然后图像可能不会出现在服务器上，function将进入无限循环。 我仍然在testing。 随意调整它:)

 var retries = 0; $.imgReload = function() { var loaded = 1; $("img").each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { var src = $(this).attr("src"); var date = new Date(); $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache loaded =0; } }); retries +=1; if (retries < 10) { // If after 10 retries error images are not fixed maybe because they // are not present on server, the recursion will break the loop if (loaded == 0) { setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server } // All images have been loaded else { // alert("images loaded"); } } // If error images cannot be loaded after 10 retries else { // alert("recursion exceeded"); } } jQuery(document).ready(function() { setTimeout('$.imgReload()',5000); }); 

Answer 8

这里是一个快速和脏的方式来取代所有破碎的图像，并没有必要改变HTML代码;）

http://ashfaqahmed.net/jquery-replacing-broken-images/

 $("img").each(function() { var NoImageUrl = "http://www.acsu.buffalo.edu/~rslaine/imageNotFound.jpg"; var image = $(this); var ThisHeight = $(image).css("height"); var ThisWidth = $(image).css("width"); if (image.context.naturalWidth == 0 || image.readyState == 'uninitialized') { $(image).unbind("error").attr("src", NoImageUrl).css( { height: ThisHeight, width: ThisWidth, }); } }); 

Answer 9

这是一个糟糕的技术，但它有很大的保证：

 <img ... onerror="this.parentNode.removeChild(this);"> 

Answer 10

虽然OP希望取代SRC，但我相信很多人触及这个问题可能只是希望隐藏破碎的图像，在这种情况下， 这个简单的解决scheme对我来说非常有用：

 <img src="someimage.jpg" onerror="this.style.display='none';" /> 

Answer 11

你可以使用GitHub自己的获取：

前端： https ： //github.com/github/fetch
或为后端，一个Node.js版本： https ： //github.com/bitinn/node-fetch

 fetch(url) .then(function(res) { if (res.status == '200') { return image; } else { return placeholder; } } 

编辑：这种方法将取代XHR，应该已经在Chrome中。 对于将来阅读此内容的任何人，您可能不需要上述库。

Answer 12

更好的呼叫使用

 jQuery(window).load(function(){ $.imgReload(); }); 

因为使用document.ready并不意味着图像加载，只有HTML。 因此，不需要延迟的呼叫。

Answer 13

CoffeeScript变体：

我使用了Turbolinks来解决一个问题，即使图像真的存在，也会导致在Firefox中引发.error（）方法。

 $("img").error -> e = $(@).get 0 $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) 

Answer 14

通过使用Prestaul的答案 ，我添加了一些检查，我更喜欢使用jQuery的方式。

 <img src="image1.png" onerror="imgError(this,1);"/> <img src="image2.png" onerror="imgError(this,2);"/> function imgError(image, type) { if (typeof jQuery !== 'undefined') { var imgWidth=$(image).attr("width"); var imgHeight=$(image).attr("height"); // Type 1 puts a placeholder image // Type 2 hides img tag if (type == 1) { if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') { $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/"); } else { $(image).attr("src", "http://lorempixel.com/200/200/"); } } else if (type == 2) { $(image).hide(); } } return true; } 

Answer 15

如果你已经用innerHTML插入了你的img ，比如： $("div").innerHTML = <img src="wrong-uri"> ，你可以加载另外一张图片，例如：

 <script> function imgError(img) { img.error=""; img.src="valid-uri"; } </script> <img src="wrong-uri" onerror="javascript:imgError(this)"> 

为什么是javascript: _需要？ 因为通过脚本标记注入到DOM中的脚本在注入时不会运行，所以必须明确。

Answer 16

我发现这篇文章，而看着这个其他SOpost 。 以下是我在那里给出的答案的副本。

我知道这是一个古老的线程，但是React已经变得stream行，也许有人使用React来到这里寻找同样问题的答案。

所以，如果你使用的是React，你可以做下面这样的事情，这是React团队的Ben Alpert在这里提供的答案

 getInitialState: function(event) { return {image: "http://example.com/primary_image.jpg"}; }, handleError: function(event) { this.setState({image: "http://example.com/failover_image.jpg"}); }, render: function() { return ( <img onError={this.handleError} src={src} />; ); } 

Answer 17

我创build了一个小提琴来replace使用“onerror”事件破碎的图像。 这可能会帮助你。

  //the placeholder image url var defaultUrl = "url('https://sadasd/image02.png')"; $('div').each(function(index, item) { var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); $('<img>', { src: currentUrl }).on("error", function(e) { $this = $(this); $this.css({ "background-image": defaultUrl }) e.target.remove() }.bind(this)) }) 

Answer 18

这是一个使用JQuery包装的HTML5 Image对象的例子。 调用主图像URL的加载函数，如果该加载导致错误，请将图像的src属性replace为备用URL。

 function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) { var $img = $('#' + imgId); $(new Image()).load().error(function() { $img.attr('src', backupUrl); }).attr('src', primaryUrl) } <img id="myImage" src="primary-image-url"/> <script> loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url'); </script> 

Answer 19

纯JS。 我的任务是：如果图像'bl-once.png'是空的 – >从数组列表（在当前目录中）插入第一个（没有404状态）图像：

 <img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)"> 

Answer 20

这是JavaScript，应该跨浏览器兼容，并提供没有丑陋的标记onerror="" ：

 var sPathToDefaultImg = 'stackexchange/img/logos/so/so-icon.png', validateImage = function( domImg ) { oImg = new Image(); oImg.onerror = function() { domImg.src = sPathToDefaultImg; }; oImg.src = domImg.src; }, aImg = document.getElementsByTagName( 'IMG' ), i = aImg.length; while ( i-- ) { validateImage( aImg[i] ); } 

CODEPEN：

Answer 21

我不确定是否有更好的方法，但我可以想象得到它 – 你可以将Ajax发布到img URL，并parsing响应以查看图像是否实际返回。 如果它返回404或什么的，那么换出img。 虽然我预计这会很慢。

Answer 22

我用这两个简单的函数解决了我的问题：

 function imgExists(imgPath) { var http = jQuery.ajax({ type:"HEAD", url: imgPath, async: false }); return http.status != 404; } function handleImageError() { var imgPath; $('img').each(function() { imgPath = $(this).attr('src'); if (!imgExists(imgPath)) { $(this).attr('src', 'images/noimage.jpg'); } }); } 

Answer 23

jQuery 1.8

 // If missing.png is missing, it is replaced by replacement.png $( "img" ) .error(function() { $( this ).attr( "src", "replacement.png" ); }) .attr( "src", "missing.png" ); 

jQuery 3

 // If missing.png is missing, it is replaced by replacement.png $( "img" ) .on("error", function() { $( this ).attr( "src", "replacement.png" ); }) .attr( "src", "missing.png" ); 

参考

Answer 24

 ;(window.jQuery || window.Zepto).fn.fallback = function (fallback) { return this.one('error', function () { var self = this; this.src = (fallback || 'http://lorempixel.com/$width/$height') .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; }); }); }; 

您可以传递占位符path，并通过$*存取失败映像对象中的所有属性：

 $('img').fallback('http://dummyimage.com/$widthx$height&text=$src'); 

http://jsfiddle.net/ARTsinn/Cu4Zn/

Answer 25

多年来，这一直令我沮丧。 我的CSS修补程序在img上设置了一个背景图像。 当一个dynamic图像src没有加载到前台时，在img的bg上可以看到一个占位符。 如果您的图像具有默认大小（例如， height ， min-height ， width和/或min-width ），这将起作用。

你会看到破碎的图像图标，但这是一个改进。 testing成功IE9。 iOS Safari和Chrome甚至不会显示破损的图标。

 .dynamicContainer img { background: url('http://img.dovov.complaceholder.png'); background-size: contain; } 

添加一些animation给src时间加载没有背景闪烁。 Chrome平滑地在后台淡出，但桌面Safari没有。

 .dynamicContainer img { background: url('http://img.dovov.complaceholder.png'); background-size: contain; -webkit-animation: fadein 1s; animation: fadein 1s; } @-webkit-keyframes fadein { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @keyframes fadein { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } 

Answer 26

我使用下面的代码，首先尝试根据用户标识（在本例中为“123”）查找当前用户的头像，如果找不到头像图像，则onerror代码会将img src更改为占位符图像。

 <img src="avatars/users/123.png" onerror="this.src='/ngTribeBase/src/assets/img/avatars/male.png'" />