jQuery JavaScript to replace broken images

Question

I have a web page that includes a bunch of images  Sometimes the image isn t available  so a broken image is displayed in the client s browser   How do I use jQuery to get the set of images  filter it to broken images then replace the src     --I thought it would be easier to do this with jQuery  but it turned out much easier to just use a pure JavaScript solution  that is  the one provided by Prestaul

User · Answer

Here is an example using the HTML5 Image object wrapped by JQuery   Call the load function for the primary image URL and if that load causes an error  replace the src attribute of the image with a backup URL   function loadImageUseBackupUrlOnError imgId  primaryUrl  backupUrl        var  img           imgId         new Image    load   error function              img attr  src   backupUrl          attr  src   primaryUrl      lt img id  myImage  src  primary-image-url   gt   lt script gt      loadImageUseBackupUrlOnError  myImage   primary-image-url   backup-image-url     lt  script gt

User · Answer

window  bind  load   function          img   each function         if   typeof this naturalWidth     quot undefined quot   amp  amp  this naturalWidth    0           this readyState     uninitialized                                                 this  attr  src    missing jpg                     Source  http   www developria com 2009 03 jquery-quickie---broken-images html

User · Answer

I am not sure if there is a better way  but I can think of a hack to get it - you could Ajax post to the img URL  and parse the response to see if the image actually came back  If it came back as a 404 or something  then swap out the img  Though I expect this to be quite slow

User · Answer

Better call using  jQuery window  load function          imgReload          Because using document ready doesn t necessary imply that images are loaded  only the HTML  Thus  there is no need for a delayed call

User · Answer

Handle the onError event for the image to reassign its source using JavaScript   function imgError image        image onerror           image src     images noimage gif       return true         lt img src  image png  onerror  imgError this     gt    Or without a JavaScript function    lt img src  image png  onError  this onerror null this src   images noimage gif      gt    The following compatibility table lists the browsers that support the error facility   http   www quirksmode org dom events error html

User · Answer

I found this post while looking at this other SO post   Below is a copy of the answer I gave there   I know this is an old thread  but React has become popular and  perhaps  someone using React will come here looking for an answer to the same problem   So  if you are using React  you can do something like the below  which was an answer original provided by Ben Alpert of the React team here  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            lt img onError  this handleError  src  src    gt

User · Answer

I couldn t find a script to suit my needs  so I made a recursive function to check for broken images and attempt to reload them every four seconds until they are fixed   I limited it to 10 attempts as if it s not loaded by then the image might not be present on server and the function would enter an infinite loop  I am still testing though  Feel free to tweak it     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  lt  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   lt 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

User · Answer

I found this to work best  if any image fails to load the first time  it is completely removed from the DOM   Executing console clear   keeps the console window clean  since the 404 errors cannot be omitted with try catch blocks        img   one  error   function err           console log JSON stringify err  null  4         this  remove       console clear

User · Answer

Sometimes using the error event is not feasible  e g  because you re trying to do something on a page that   s already loaded  such as when you   re running code via the console  a bookmarklet  or a script loaded asynchronously  In that case  checking that img naturalWidth and img naturalHeight are 0 seems to do the trick   For example  here s a snippet to reload all broken images from the console        img   forEach img   gt      if   img naturalWidth  amp  amp   img naturalHeight        img src   img src

User · Answer

Handle the onError event for the image to reassign its source using JavaScript   function imgError image        image onerror           image src     images noimage gif       return true         lt img src  image png  onerror  imgError this     gt    Or without a JavaScript function    lt img src  image png  onError  this onerror null this src   images noimage gif      gt    The following compatibility table lists the browsers that support the error facility   http   www quirksmode org dom events error html

User · Answer

Pure JS  My task was  if image  bl-once png  is empty -  insert the first one  that hasn t 404 status  image from array list  in current dir     x000D   x000D   lt img src  http   localhost 63342 GetImage bl-once png  width  200  onerror  replaceEmptyImage insertImg this   gt  x000D   x000D   x000D    Maybe it needs to be improved  but    x000D   x000D  var srcToInsertArr     empty1 png    empty2 png    needed png    notActual png       try to insert one by one img from this array x000D      var path  x000D      var imgNotFounded   true     to mark when success x000D   x000D      var replaceEmptyImage     x000D          insertImg  function  elem    x000D   x000D              if  srcToInsertArr length    0       if there are no more src to try return x000D                  return  no-image png   x000D                x000D              if   undefined  test elem src        remember path x000D                  path   elem src split      slice 0  -1  join           http   localhost 63342 GetImage  x000D                x000D              var url   path         srcToInsertArr 0   x000D   x000D              srcToInsertArr splice 0  1      tried 1 src x000D   x000D               x000D                  if imgNotFounded      while not success x000D                      replaceEmptyImage getImg url  path  elem      CALL GET IMAGE x000D                    x000D               x000D   x000D             x000D          getImg  function  src  path  elem       GET IMAGE x000D   x000D              if  src  amp  amp  path  amp  amp  elem       src    http   localhost 63342 GetImage needed png  x000D                   x000D                  var pathArr   src split            http         localhost 63342    GetImage    needed png   x000D                  var name   pathArr pathArr length - 1       needed png  x000D   x000D                  xhr   new XMLHttpRequest    x000D                  xhr open  GET   src  true   x000D                  xhr send    x000D   x000D                  xhr onreadystatechange   function      x000D   x000D                      if  xhr status    200    x000D                          elem src   src     insert correct src x000D                          imgNotFounded   false     mark success x000D                        x000D                      else   x000D                          console log name     doesn t exist     x000D                          elem onerror    x000D                        x000D   x000D                    x000D                x000D            x000D   x000D         x000D   x000D   x000D    So  it will insert correct  needed png  to my src or  no-image png  from current dir

User · Answer

Here is a standalone solution    window  load function          img   each function         if    this complete          typeof this naturalWidth     quot undefined quot           this naturalWidth    0                               image was broken  replace with your new image       this src    http   www tranism com weblog images broken ipod gif

User · Answer

I use the built in error handler      img   error function            this  unbind  error   attr  src    broken gif          Edit  The error   method is deprecated in jquery 1 8 and higher  Instead  you should use  on  error   instead      img   on  error   function            this  attr  src    broken gif

User · Answer

I found this post while looking at this other SO post   Below is a copy of the answer I gave there   I know this is an old thread  but React has become popular and  perhaps  someone using React will come here looking for an answer to the same problem   So  if you are using React  you can do something like the below  which was an answer original provided by Ben Alpert of the React team here  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            lt img onError  this handleError  src  src    gt

User · Answer

This has been frustrating me for years   My CSS fix sets a background image on the img  When a dynamic image src doesn t load to the foreground  a placeholder is visible on the img s bg   This works if your images have a default size  e g  height  min-height  width and or min-width   You ll see the broken image icon but it s an improvement   Tested down to IE9 successfully   iOS Safari and Chrome don t even show a broken icon   dynamicContainer img     background  url   images placeholder png      background-size  contain     Add a little animation to give src time to load without a background flicker   Chrome fades in the background smoothly but desktop Safari doesn t   dynamicContainer img     background  url   images placeholder png      background-size  contain    animation  fadein 1s                           keyframes fadein     0      opacity  0 0      50     opacity  0 5      100    opacity  1 0

User · Answer

You can use GitHub s own fetch for this   Frontend  https   github com github fetch or for Backend  a Node js version  https   github com bitinn node-fetch  fetch url     then function res        if  res status     200           return image        else         return placeholder              Edit  This method is going to replace XHR and supposedly already has been in Chrome  To anyone reading this in the future  you may not need the aforementioned library included

User · Answer

While the OP was looking to replace the SRC  I m sure many people hitting this question may only wish to hide the broken image  in which case this simple solution worked great for me  Using Inline JavaScript   x000D   x000D   lt img src  img jpg  onerror  this style display  none      gt  x000D   x000D   x000D   Using External JavaScript   x000D   x000D  var images   document querySelectorAll  img     for  var i   0  i  lt  images length  i        images i  onerror   function         this style display  none         x000D   lt img src  img jpg    gt  x000D   x000D   x000D   Using Modern External JavaScript   x000D   x000D  document querySelectorAll  img   forEach  img    gt      img onerror   function         this style display    none           x000D   lt img src  img jpg    gt  x000D   x000D   x000D   See browser support for NodeList forEach and arrow functions

User · Answer

If the image cannot be loaded  for example  because it is not present at the supplied URL   image URL will be changed into default   For more about  error     x000D   x000D     img   on  error   function  e    x000D      this  attr  src    broken png    x000D      x000D   x000D   x000D

User · Answer

In case someone like me  tries to attach the error event to a dynamic HTML img tag  I d like to point out that  there is a catch    Apparently img error events don t bubble in most browsers  contrary to what the standard says   So  something like the following will not work     document  on  error    img   function               Hope this will be helpful to someone else  I wish I had seen this here in this thread  But  I didn t  So  I am adding it

User · Answer

I use lazy load and have to do this in order to make it work properly   lazyload     var errorURL    https   example com thisimageexist png      document  ready function            data-src    on  error   function            this  attr  src   errorURL

User · Answer

Here is a standalone solution    window  load function          img   each function         if    this complete          typeof this naturalWidth     quot undefined quot           this naturalWidth    0                               image was broken  replace with your new image       this src    http   www tranism com weblog images broken ipod gif

User · Answer

window  bind  load   function          img   each function         if   typeof this naturalWidth     quot undefined quot   amp  amp  this naturalWidth    0           this readyState     uninitialized                                                 this  attr  src    missing jpg                     Source  http   www developria com 2009 03 jquery-quickie---broken-images html

User · Answer

I use lazy load and have to do this in order to make it work properly   lazyload     var errorURL    https   example com thisimageexist png      document  ready function            data-src    on  error   function            this  attr  src   errorURL

User · Answer

I couldn t find a script to suit my needs  so I made a recursive function to check for broken images and attempt to reload them every four seconds until they are fixed   I limited it to 10 attempts as if it s not loaded by then the image might not be present on server and the function would enter an infinite loop  I am still testing though  Feel free to tweak it     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  lt  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   lt 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

User · Answer

I am not sure if there is a better way  but I can think of a hack to get it - you could Ajax post to the img URL  and parse the response to see if the image actually came back  If it came back as a 404 or something  then swap out the img  Though I expect this to be quite slow

User · Answer

I believe this is what you re after  jQuery Preload Here s the example code from the demo  you specify the loading and not found images and you re all set  jQuery   images img   preload     placeholder  placeholder jpg     notFound  notfound jpg

User · Answer

I found this to work best  if any image fails to load the first time  it is completely removed from the DOM   Executing console clear   keeps the console window clean  since the 404 errors cannot be omitted with try catch blocks        img   one  error   function err           console log JSON stringify err  null  4         this  remove       console clear

User · Answer

I created a fiddle to replace the broken image using  onerror  event  This may help you          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              lt img gt              src  currentUrl          on  error   function e             this     this            this css              background-image   defaultUrl                    e target remove           bind this

User · Answer

Here is a standalone solution    window  load function          img   each function         if    this complete          typeof this naturalWidth     quot undefined quot           this naturalWidth    0                               image was broken  replace with your new image       this src    http   www tranism com weblog images broken ipod gif

User · Answer

Sometimes using the error event is not feasible  e g  because you re trying to do something on a page that   s already loaded  such as when you   re running code via the console  a bookmarklet  or a script loaded asynchronously  In that case  checking that img naturalWidth and img naturalHeight are 0 seems to do the trick   For example  here s a snippet to reload all broken images from the console        img   forEach img   gt      if   img naturalWidth  amp  amp   img naturalHeight        img src   img src

User · Answer

While the OP was looking to replace the SRC  I m sure many people hitting this question may only wish to hide the broken image  in which case this simple solution worked great for me  Using Inline JavaScript   x000D   x000D   lt img src  img jpg  onerror  this style display  none      gt  x000D   x000D   x000D   Using External JavaScript   x000D   x000D  var images   document querySelectorAll  img     for  var i   0  i  lt  images length  i        images i  onerror   function         this style display  none         x000D   lt img src  img jpg    gt  x000D   x000D   x000D   Using Modern External JavaScript   x000D   x000D  document querySelectorAll  img   forEach  img    gt      img onerror   function         this style display    none           x000D   lt img src  img jpg    gt  x000D   x000D   x000D   See browser support for NodeList forEach and arrow functions

User · Answer

In case someone like me  tries to attach the error event to a dynamic HTML img tag  I d like to point out that  there is a catch    Apparently img error events don t bubble in most browsers  contrary to what the standard says   So  something like the following will not work     document  on  error    img   function               Hope this will be helpful to someone else  I wish I had seen this here in this thread  But  I didn t  So  I am adding it

User · Answer

CoffeeScript variant   I made it to fix an issue with Turbolinks that causes the  error   method to get raised in Firefox sometimes even though the image is really there      img   error - gt    e        get 0        hide   if    browser msie  amp  amp   typeof this naturalWidth     undefined     this naturalWidth    0

User · Answer

By using Prestaul s answer  I added some checks and I prefer to use the jQuery way    lt img src  image1 png  onerror  imgError this 1     gt   lt img src  image2 png  onerror  imgError this 2     gt   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   amp  amp  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

User · Answer

I think I have a more elegant way with event delegation and event capturing on window s error even when the backup image fail to load    x000D   x000D  img   x000D    width  100px  x000D    height  100px  x000D    x000D   lt script gt  x000D    window addEventListener  error   windowErrorCb    x000D      capture  true x000D       true  x000D   x000D    function windowErrorCb event    x000D      let target   event target x000D      let isImg   target tagName toLowerCase        img  x000D      if  isImg    x000D        imgErrorCb   x000D        return x000D        x000D   x000D      function imgErrorCb     x000D        let isImgErrorHandled   target hasAttribute  data-src-error   x000D        if   isImgErrorHandled    x000D          target setAttribute  data-src-error    handled   x000D          target src    backup png  x000D          else   x000D            anything you want to do x000D          console log target alt   both origin and backup image fail to load     x000D          x000D        x000D      x000D   lt  script gt  x000D   lt img id  img  src  error1 png  alt  error1  gt  x000D   lt img id  img  src  error2 png  alt  error2  gt  x000D   lt img id  img  src  https   i stack imgur com ZXCE2 jpg  alt  avatar  gt  x000D   x000D   x000D    The point is     Put the code in the head and executed as the first inline script  So  it will listen the errors happen after the script  Use event capturing to catch the errors  especially for those events which don t bubble  Use event delegation which avoids binding events on each image  Give the error img element an attribute after giving them a backup png to avoid disappearance of the backup png and subsequent infinite loop like below    img error- backup png- error- backup png- error-

User · Answer

CoffeeScript variant   I made it to fix an issue with Turbolinks that causes the  error   method to get raised in Firefox sometimes even though the image is really there      img   error - gt    e        get 0        hide   if    browser msie  amp  amp   typeof this naturalWidth     undefined     this naturalWidth    0

User · Answer

I solved my problem with these two simple functions   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

User · Answer

I got the same problem  This code works well on my case       Replace broken images by a default img    img   each function        if   this  attr  src                  this src     default feature image png

User · Answer

This is JavaScript  should be cross browser compatible  and delivers without the ugly markup onerror      var sPathToDefaultImg    http   cdn sstatic net 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

User · Answer

I solved my problem with these two simple functions   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

User · Answer

I got the same problem  This code works well on my case       Replace broken images by a default img    img   each function        if   this  attr  src                  this src     default feature image png

User · Answer

I am not sure if there is a better way  but I can think of a hack to get it - you could Ajax post to the img URL  and parse the response to see if the image actually came back  If it came back as a 404 or something  then swap out the img  Though I expect this to be quite slow

User · Answer

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       reference

User · Answer

By using Prestaul s answer  I added some checks and I prefer to use the jQuery way    lt img src  image1 png  onerror  imgError this 1     gt   lt img src  image2 png  onerror  imgError this 2     gt   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   amp  amp  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

User · Answer

I think I have a more elegant way with event delegation and event capturing on window s error even when the backup image fail to load    x000D   x000D  img   x000D    width  100px  x000D    height  100px  x000D    x000D   lt script gt  x000D    window addEventListener  error   windowErrorCb    x000D      capture  true x000D       true  x000D   x000D    function windowErrorCb event    x000D      let target   event target x000D      let isImg   target tagName toLowerCase        img  x000D      if  isImg    x000D        imgErrorCb   x000D        return x000D        x000D   x000D      function imgErrorCb     x000D        let isImgErrorHandled   target hasAttribute  data-src-error   x000D        if   isImgErrorHandled    x000D          target setAttribute  data-src-error    handled   x000D          target src    backup png  x000D          else   x000D            anything you want to do x000D          console log target alt   both origin and backup image fail to load     x000D          x000D        x000D      x000D   lt  script gt  x000D   lt img id  img  src  error1 png  alt  error1  gt  x000D   lt img id  img  src  error2 png  alt  error2  gt  x000D   lt img id  img  src  https   i stack imgur com ZXCE2 jpg  alt  avatar  gt  x000D   x000D   x000D    The point is     Put the code in the head and executed as the first inline script  So  it will listen the errors happen after the script  Use event capturing to catch the errors  especially for those events which don t bubble  Use event delegation which avoids binding events on each image  Give the error img element an attribute after giving them a backup png to avoid disappearance of the backup png and subsequent infinite loop like below    img error- backup png- error- backup png- error-

User · Answer

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       reference

User · Answer

This is a crappy technique  but it s pretty much guaranteed   lt img onerror  quot this parentNode removeChild this   quot  gt

User · Answer

Better call using  jQuery window  load function          imgReload          Because using document ready doesn t necessary imply that images are loaded  only the HTML  Thus  there is no need for a delayed call

User · Answer

This is JavaScript  should be cross browser compatible  and delivers without the ugly markup onerror      var sPathToDefaultImg    http   cdn sstatic net 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

User · Answer

If you have inserted your img with innerHTML  like     div   innerHTML    lt img src  wrong-uri  gt   you can load another image if it fails doing  e g  this    lt script gt      function imgError img            img error             img src  valid-uri          lt  script gt    lt img src  wrong-uri  onerror  javascript imgError this   gt    Why is javascript   needed  Because scripts injected into the DOM via script tags in innerHTML are not run at the time they are injected  so you have to be explicit

User · Answer

Pure JS  My task was  if image  bl-once png  is empty -  insert the first one  that hasn t 404 status  image from array list  in current dir     x000D   x000D   lt img src  http   localhost 63342 GetImage bl-once png  width  200  onerror  replaceEmptyImage insertImg this   gt  x000D   x000D   x000D    Maybe it needs to be improved  but    x000D   x000D  var srcToInsertArr     empty1 png    empty2 png    needed png    notActual png       try to insert one by one img from this array x000D      var path  x000D      var imgNotFounded   true     to mark when success x000D   x000D      var replaceEmptyImage     x000D          insertImg  function  elem    x000D   x000D              if  srcToInsertArr length    0       if there are no more src to try return x000D                  return  no-image png   x000D                x000D              if   undefined  test elem src        remember path x000D                  path   elem src split      slice 0  -1  join           http   localhost 63342 GetImage  x000D                x000D              var url   path         srcToInsertArr 0   x000D   x000D              srcToInsertArr splice 0  1      tried 1 src x000D   x000D               x000D                  if imgNotFounded      while not success x000D                      replaceEmptyImage getImg url  path  elem      CALL GET IMAGE x000D                    x000D               x000D   x000D             x000D          getImg  function  src  path  elem       GET IMAGE x000D   x000D              if  src  amp  amp  path  amp  amp  elem       src    http   localhost 63342 GetImage needed png  x000D                   x000D                  var pathArr   src split            http         localhost 63342    GetImage    needed png   x000D                  var name   pathArr pathArr length - 1       needed png  x000D   x000D                  xhr   new XMLHttpRequest    x000D                  xhr open  GET   src  true   x000D                  xhr send    x000D   x000D                  xhr onreadystatechange   function      x000D   x000D                      if  xhr status    200    x000D                          elem src   src     insert correct src x000D                          imgNotFounded   false     mark success x000D                        x000D                      else   x000D                          console log name     doesn t exist     x000D                          elem onerror    x000D                        x000D   x000D                    x000D                x000D            x000D   x000D         x000D   x000D   x000D    So  it will insert correct  needed png  to my src or  no-image png  from current dir

User · Answer

I believe this is what you re after  jQuery Preload Here s the example code from the demo  you specify the loading and not found images and you re all set  jQuery   images img   preload     placeholder  placeholder jpg     notFound  notfound jpg

User · Answer

This is a crappy technique  but it s pretty much guaranteed   lt img onerror  quot this parentNode removeChild this   quot  gt

User · Answer

I created a fiddle to replace the broken image using  onerror  event  This may help you          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              lt img gt              src  currentUrl          on  error   function e             this     this            this css              background-image   defaultUrl                    e target remove           bind this

User · Answer

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                                 You can pass a placeholder path and acces in it all properties from the failed image object via        img   fallback  http   dummyimage com  widthx height amp text  src     http   jsfiddle net ARTsinn Cu4Zn

User · Answer

This has been frustrating me for years   My CSS fix sets a background image on the img  When a dynamic image src doesn t load to the foreground  a placeholder is visible on the img s bg   This works if your images have a default size  e g  height  min-height  width and or min-width   You ll see the broken image icon but it s an improvement   Tested down to IE9 successfully   iOS Safari and Chrome don t even show a broken icon   dynamicContainer img     background  url   images placeholder png      background-size  contain     Add a little animation to give src time to load without a background flicker   Chrome fades in the background smoothly but desktop Safari doesn t   dynamicContainer img     background  url   images placeholder png      background-size  contain    animation  fadein 1s                           keyframes fadein     0      opacity  0 0      50     opacity  0 5      100    opacity  1 0

User · Answer

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                                 You can pass a placeholder path and acces in it all properties from the failed image object via        img   fallback  http   dummyimage com  widthx height amp text  src     http   jsfiddle net ARTsinn Cu4Zn

User · Answer

I believe this is what you re after  jQuery Preload Here s the example code from the demo  you specify the loading and not found images and you re all set  jQuery   images img   preload     placeholder  placeholder jpg     notFound  notfound jpg

User · Answer

Here is a standalone solution    window  load function          img   each function         if    this complete          typeof this naturalWidth     quot undefined quot           this naturalWidth    0                               image was broken  replace with your new image       this src    http   www tranism com weblog images broken ipod gif

User · Answer

If the image cannot be loaded  for example  because it is not present at the supplied URL   image URL will be changed into default   For more about  error     x000D   x000D     img   on  error   function  e    x000D      this  attr  src    broken png    x000D      x000D   x000D   x000D

User · Answer

If you have inserted your img with innerHTML  like     div   innerHTML    lt img src  wrong-uri  gt   you can load another image if it fails doing  e g  this    lt script gt      function imgError img            img error             img src  valid-uri          lt  script gt    lt img src  wrong-uri  onerror  javascript imgError this   gt    Why is javascript   needed  Because scripts injected into the DOM via script tags in innerHTML are not run at the time they are injected  so you have to be explicit

User · Answer

I believe this is what you re after  jQuery Preload Here s the example code from the demo  you specify the loading and not found images and you re all set  jQuery   images img   preload     placeholder  placeholder jpg     notFound  notfound jpg

User · Answer

Handle the onError event for the image to reassign its source using JavaScript   function imgError image        image onerror           image src     images noimage gif       return true         lt img src  image png  onerror  imgError this     gt    Or without a JavaScript function    lt img src  image png  onError  this onerror null this src   images noimage gif      gt    The following compatibility table lists the browsers that support the error facility   http   www quirksmode org dom events error html

User · Answer

I use the built in error handler      img   error function            this  unbind  error   attr  src    broken gif          Edit  The error   method is deprecated in jquery 1 8 and higher  Instead  you should use  on  error   instead      img   on  error   function            this  attr  src    broken gif

User · Answer

Here is a quick-and-dirty way to replace all the broken images  and there is no need to change the HTML code     codepen example         img   each function            var img     this           var image   new Image            image src     img  attr  src            var no image    https   dummyimage com 100x100 7080b5 000000 amp text No image           if  image naturalWidth    0    image readyState     uninitialized                  img  unbind  error   attr  src   no image  css                   height    img  css  height                    width    img  css  width

User · Answer

Here is a quick-and-dirty way to replace all the broken images  and there is no need to change the HTML code     codepen example         img   each function            var img     this           var image   new Image            image src     img  attr  src            var no image    https   dummyimage com 100x100 7080b5 000000 amp text No image           if  image naturalWidth    0    image readyState     uninitialized                  img  unbind  error   attr  src   no image  css                   height    img  css  height                    width    img  css  width

User · Answer

Here is an example using the HTML5 Image object wrapped by JQuery   Call the load function for the primary image URL and if that load causes an error  replace the src attribute of the image with a backup URL   function loadImageUseBackupUrlOnError imgId  primaryUrl  backupUrl        var  img           imgId         new Image    load   error function              img attr  src   backupUrl          attr  src   primaryUrl      lt img id  myImage  src  primary-image-url   gt   lt script gt      loadImageUseBackupUrlOnError  myImage   primary-image-url   backup-image-url     lt  script gt

User · Answer

Handle the onError event for the image to reassign its source using JavaScript   function imgError image        image onerror           image src     images noimage gif       return true         lt img src  image png  onerror  imgError this     gt    Or without a JavaScript function    lt img src  image png  onError  this onerror null this src   images noimage gif      gt    The following compatibility table lists the browsers that support the error facility   http   www quirksmode org dom events error html

User · Answer

I am not sure if there is a better way  but I can think of a hack to get it - you could Ajax post to the img URL  and parse the response to see if the image actually came back  If it came back as a 404 or something  then swap out the img  Though I expect this to be quite slow

User · Answer

You can use GitHub s own fetch for this   Frontend  https   github com github fetch or for Backend  a Node js version  https   github com bitinn node-fetch  fetch url     then function res        if  res status     200           return image        else         return placeholder              Edit  This method is going to replace XHR and supposedly already has been in Chrome  To anyone reading this in the future  you may not need the aforementioned library included

[javascript] jQuery/JavaScript to replace broken images

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to brokenimage