how to show alternate image if source image is not found onerror working in IE but not in mozilla

Question

I need to show an alternate image in cell of table if source image is not found  Currently below code is used to do so   cell innerHTML   lt img height 40 width 40 src   lt   request getContextPath    gt  writeImage htm  onError  ImgErrorVideo this    gt    function ImgErrorVideo source           source src    video png           source onerror                return true       Now the problem is that the above is solution is working in Internet Explorer but not in mozilla   Please tell me some solution which works in all browsers

User · Answer

I think this is very nice and short   lt img src  imagenotfound gif  alt  Image not found  onerror  this src  imagefound gif      gt    But  be careful  The user s browser will be stuck in an endless loop if the onerror image itself generates an error     EDIT To avoid endless loop  remove the onerror from it at once    lt img src  imagenotfound gif  alt  Image not found  onerror  this onerror null this src  imagefound gif      gt    By calling this onerror null it will remove the onerror then try to get the alternate image     NEW I would like to add a jQuery way  if this can help anyone    lt script gt    document  ready function             backup picture   on  error   function              this  attr  src      images nopicture png                 lt  script gt    lt img class  backup picture  src    images nonexistent image file png    gt    You simply need to add class  backup picture  to any img tag that you want a backup picture to load if it tries to show a bad image

User · Answer

I have got the solution for my query   i have done something like this   cell innerHTML   lt img height 40 width 40 alt    src   lt   request getContextPath    gt  writeImage htm   onerror  onImgError this    onLoad  setDefaultImage this    gt    function setDefaultImage source           var badImg   new Image            badImg src    video png           var cpyImg   new Image            cpyImg src   source src           if  cpyImg width                        source src   badImg src                         function onImgError source           source src    video png           source onerror                return true            This way it s working in all browsers

User · Answer

If you re open to a PHP solution    lt td gt  lt img src   lt  PHP    path1    path to your image jpg      path2    alternate path to another image jpg      echo file exists  path1     path1    path2       gt   alt      gt   lt  td gt        EDIT  OK  here s a JS version    lt table gt  lt tr gt   lt td gt  lt img src    id  myImage    gt  lt  td gt   lt  tr gt  lt  table gt    lt script type  text javascript  gt    document getElementById  myImage   src    newImage png      document getElementById  myImage   onload   function          alert  done            document getElementById  myImage   onerror   function          alert  Inserting alternate        document getElementById  myImage   src    alternate png         lt  script gt

[javascript] how to show alternate image if source image is not found? (onerror working in IE but not in mozilla)

Examples related to javascript

Examples related to html

Examples related to image