JavaScript img.src onerror event - get reason of error -

there can different reasons <img> load errors, such network error response, bad image data...

error object received onerror doesn't seems specify exact reason.

is there way know if error because of network error, http 500 or network timeout?

edit: i'm not looking alternative way load resource, such ajax request. need answer <img> tag onerror event. reason i'm using method pixel-tracking , need way retry on upon network errors. i'm not looking alternative tracking methods such jsonp.

edit 16nov16 2020gmt

maybe pixel-tracking in emails or other clients limited in javascript capabilities.

one idea comes mind use url query paramters in <img>'s src url.

with regards network timeouts, pose idea user opens email, loads email entirely, disconnects internet , somehow not give tracker enough time load.

https://developer.mozilla.org/en-us/docs/web/api/windowtimers/settimeout

i suggest use settimeout() inside onerror function. continue attempting set/load <img>'s src url. append seconds took until successful load url of src file query parameter ?s=<sec>

as far determining status 500 codes on image loads might want consider creating custom 500 error file create -- example -- mysql database entry sorts of information have access , if chose use query parameters mentioned before have more information added error.

onerror <img> gives limited information network

the information available <img> can found @ https://www.w3.org/tr/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

---

older answer:

perhaps route try use ajax load image data , set <img> src base64 of image data received. hope helps.

edit 14nov16 2018gmt

alternatively use ajax determine if image loads , then use same url sent ajax src <img>. of course redundant avoid issue of long "data" urls.

edit 15nov16 0832gmt

also regarding network timeout found thread useful jquery ajax - how detect network connection error when making ajax call apparently can specify timeout ajax using error except provide miliseconds manually.

converting base64

https://developer.mozilla.org/en-us/docs/web/api/windowbase64/base64_encoding_and_decoding

• https://developer.mozilla.org/en-us/docs/web/api/windowbase64/btoa

  var encodeddata = window.btoa("hello, world"); // encode string 

or if concerened older browsers able use btoa() might interested in google's https://chromium.googlesource.com/chromiumos/platform/spigots/+/refs/heads/firmware-u-boot-v1/base64_encode.js

status code checks in jquery's ajax

jquery: how http status code within $.ajax.error method?

$.ajax({     type: 'get',     url: '/path-to-my/image.png',     data: null,     success: function(data){         alert('horray! 200 status code!');         // convert base64; add img.src # btoa(data)         document.queryselector("#hlogo img").src = "data:;base64,"+ data;     },     error:function (xhr, ajaxoptions, thrownerror){         switch (xhr.status) {             case 400:                  // take action, referencing xhr.responsetext needed.              case 404:                  // take action, referencing xhr.responsetext needed.              case 500:                  // take action, referencing xhr.responsetext needed.         } }); 

notes

• https://tools.ietf.org/html/rfc2397#section-3

  dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data mediatype  := [ type "/" subtype ] *( ";" parameter ) data       := *urlchar parameter  := attribute "=" value 

• https://tools.ietf.org/html/rfc2046#section-4.2

  using of generic-purpose image viewing application way inherits security problems of dangerous type supported application.

• https://tools.ietf.org/html/rfc2397#page-4

  the effect of using long "data" urls in applications unknown; software packages may exhibit unreasonable behavior when confronted data exceeds allocated buffer size.

other references

• unknown file type mime?
• asychronously load images jquery