Inputting a default image in case the src attribute of an html img is not valid

Question

Is there any way to render a default image in an HTML  lt img gt  tag  in case the src attribute is invalid  using only HTML    If not  what would be your lightweight way to work around it

User · Answer

Well   I found this way convenient   check for the height attribute of image to be 0  then you can overwrite the src attribute with default image  https   developer mozilla org en-US docs Web API HTMLImageElement Image   image setAttribute  src      icons  lt some image gt  png        check the height attribute   if image is available then by default it will      be 100 else 0   if image height    0                                                 image setAttribute  src      icons default png

User · Answer

I recently had to build a fall back system which included any number of fallback images  Here s how I did it using a simple JavaScript function   HTML   lt img src  some image tiff      onerror  fallBackImg this        data-fallIndex  1      data-fallback1  some image png      data-fallback2  some image jpg  gt    JavaScript  function fallBackImg elem       elem onerror   null      let index    elem dataset fallIndex      elem src   elem dataset  fallback  index         index        elem dataset fallbackindex   index      I feel like it s a pretty lightweight way of handling many fallback images

User · Answer

If you have created dynamic Web project and have placed the required image in WebContent then you can access the image by using below mentioned code in Spring MVC    lt img src  Refresh png  alt  Refresh  height  50  width  50  gt    You can also create folder named img and place the image inside the folder img and place that img folder inside WebContent then you can access the image by using below mentioned code    lt img src  img Refresh png  alt  Refresh  height  50  width  50  gt

User · Answer

Google threw out this page to the  image fallback html  keywords  but because non of the above helped me  and I was looking for a  svg fallback support for IE below 9   I kept on searching and this is what I found     lt img src  base-image svg  alt  picture    gt   lt  -- if  lte IE 8    IE   gt  lt image src  fallback-image png  alt  picture    gt  lt   endif -- gt    It might be off-topic  but it resolved my own issue and it might help someone else too

User · Answer

Using Jquery you could do something like this     document  ready function         if     img   attr  src      null               if     img   attr  src   toString                                  img   attr  src    images default jpg                       else                  img   attr  src    images default jpg

User · Answer

Found this solution in Spring in Action 3rd Ed    lt img src     resources images Image1 jpg  onerror  this src     resources images none jpg     gt   Update  This is not an HTML only solution    onerror is javascript

User · Answer

The above solution is incomplete  it missed the attribute src    this src and this attribute  src   are NOT the same  the first one contains the full reference to the image  for example http   my host error jpg  but the attribute just keeps the original value  error jpg  Correct solution   lt img src  foo jpg  onerror  if  this src     error jpg   amp  amp  this attribute  src       error jpg   this src    error jpg      gt

User · Answer

This works well for me  Maybe you wanna use JQuery to hook the event     lt img src  foo jpg  onerror  if  this src     error jpg   this src    error jpg    gt    Updated with jacquargs error guard  Updated  CSS only solution I recently saw Vitaly Friedman demo a great CSS solution I wasn t aware of  The idea is to apply the content property to the broken image  Normally  after or  before do not apply to images  but when they re broken  they re applied    lt img src  nothere jpg  gt   lt style gt  img before       content           display  block      position  absolute      height  50px      width  50px      background-image  url ishere jpg    lt  style gt    Demo  https   jsfiddle net uz2gmh2k 2   As the fiddle shows  the broken image itself is not removed  but this will probably solve the problem for most cases without any JS nor gobs of CSS  If you need to apply different images in different locations  simply differentiate with a class   my-special-case img before

User · Answer

You asked for an HTML only solution      x000D   x000D    lt  DOCTYPE html PUBLIC  -  W3C  DTD HTML 4 01  EN  x000D      http   www w3 org TR html4 strict dtd  gt  x000D   x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt title gt Object Test lt  title gt  x000D     lt meta http-equiv  Content-Type  content  text html  charset utf-8  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D     lt p gt  x000D       lt object data  http   stackoverflow com does-not-exist png  type  image png  gt  x000D         lt img src  https   cdn sstatic net Img unified sprites svg v e5e58ae7df45  alt  Stack Overflow logo and icons and such  gt  x000D       lt  object gt  x000D     lt  p gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Since the first image doesn t exist  the fallback  the sprites used on this web site   will display  And if you re using a really old browser that doesn t support object  it will ignore that tag and use the img tag  See caniuse website for compatibility  This element is widely supported by all browsers from IE6      Unless the URL for the image changed  again   in which case you ll probably see the alt text

User · Answer

An HTML only solution  where the only requirement is that you know the size of the image that you re inserting  Will not work for transparent images  as it uses background-image as a filler   We can successfully use background-image to link the image that appears if the given image is missing  Then the only problem is the broken icon image - we can remove it by inserting a very big empty character  thus pushing the content outside the display of img    x000D   x000D  img   x000D    background-image  url  http   placehold it 200x200    x000D    overflow  hidden  x000D    x000D   x000D  img before   x000D    content       x000D    font-size  1000px  x000D    x000D  This image is missing  x000D   lt img src  a jpg  style  width  200px  height  200px   gt  lt br  gt  x000D  And is displaying the placeholder x000D   x000D   x000D      An CSS only solution  Webkit only    x000D   x000D  img before   x000D    content       x000D    font-size  1000px  x000D    background-image  url  http   placehold it 200x200    x000D    display  block  x000D    width  200px  x000D    height  200px  x000D    position  relative  x000D    z-index  0  x000D    margin-bottom  -16px  x000D    x000D  This image is there  x000D   lt img src  http   placehold it 100x100   gt  lt br  gt  x000D   x000D  This image is missing  x000D   lt img src  a jpg   gt  lt br  gt  x000D  And is displaying the placeholder x000D   x000D   x000D

User · Answer

A modulable version with JQuery  add this at the end of your file    lt script gt        function                img data-src-error    error function                 var o     this               var errorSrc   o attr  data-src-error                 if  o attr  src      errorSrc                    o attr  src   errorSrc                                      lt  script gt    and on your img tag    lt img src       data-src-error         gt

User · Answer

If you re using Angular jQuery then this might help      lt img ng-src    item url    altSrc    item alt url    onerror  this src     this  attr  altSrc    gt    Explanation  Assuming that item has a property url that might be null  when it is then the image will show up as broken  That triggers execution of onerror attribute expression  as described above  You need to override the src attribute as described above  but you will need jQuery to access your altSrc  Couldn t get it to work with vanilla JavaScript   Might seem a little hacky but saved the day on my project

User · Answer

If you are using Angular 1 x you can include a directive that will allow you to fallback to any number of images  The fallback attribute supports a single url  multiple urls inside an array  or an angular expression using scope data    lt img ng-src  myFirstImage png  fallback   fallback1 png     gt   lt img ng-src  myFirstImage png  fallback    fallback1 png    fallback2 png      gt   lt img ng-src  myFirstImage png  fallback  myData arrayOfImagesToFallbackTo    gt    Add a new fallback directive to your angular app module   angular module  app services            directive  fallback      parse   function   parse            return               restrict   A               link  function  scope  element  attrs                    var errorCount   0                      Hook the image element error event                 angular element element  bind  error   function  err                        var expressionFunc    parse attrs fallback                           expressionResult                          imageUrl                       expressionResult   expressionFunc scope                        if  typeof expressionResult      string                                The expression result is a string  use it as a url                         imageUrl   expressionResult                        else if  typeof expressionResult      object   amp  amp  expressionResult instanceof Array                               The expression result is an array  grab an item from the array                            and use that as the image url                         imageUrl   expressionResult errorCount                                                 Increment the error count so we can keep track                        of how many images we have tried                     errorCount                        angular element element  attr  src   imageUrl

User · Answer

In addition to Patrick s brilliant answer  for those of you who are searching for a cross-platform angular js solution  here you go    lt object type  image png  data-ng-attr-data     url     data       gt       lt  -- any html as a fallback -- gt   lt  object gt    Here s a plunk where I was playing trying to find the right solution  http   plnkr co edit nL6FQ6kMK33NJeW8DVDY p preview

User · Answer

For any image  just use this javascript code   if  ptImage naturalWidth    0      ptImage src                icons blank png     where ptImage is a  lt img gt  tag address obtained by document getElementById

User · Answer

x000D   x000D   lt img style  background-image  url image1   url image2    gt  lt  img gt                                              x000D   x000D   x000D    Use background image that let you add multiple images  My case      image1 is the main image  this will get from some place  browser doing a request     image2 is a default local image to show while image1 is being loaded  If image1 returns any kind of error  the user won t see any change and this will be clean for user experience

User · Answer

angular2     lt img src    foo url    onerror  this src  path to altimg png   gt

User · Answer

I don t think it is possible using just HTML  However using javascript this should be doable  Bassicly we loop over each image  test if it is complete and if it s naturalWidth is zero then that means that it not found  Here is the code   fixBrokenImages   function  url        var img   document getElementsByTagName  img        var i 0  l img length      for  i lt l i             var t   img i           if t naturalWidth     0                 this image is broken             t src   url                      Use it like this    window onload   function         fixBrokenImages  example com image png         Tested in Chrome and Firefox

User · Answer

a simple img-element is not very flexible so i combined it with a picture-element  this way no CSS is needed  when an error occurs  all srcset s are set to the fallback version  a broken link image is not showing up  it does not load unneeded image versions  the picture-element supports responsive design and multiple fallbacks for types that are not supported by the browser    lt picture gt       lt source id  s1  srcset  image1 not supported by browser webp  type  image webp  gt       lt source id  s2  srcset  image2 broken link png  type  image png  gt       lt img src  image3 fallback jpg  alt    onerror  this onerror null document getElementById  s1   srcset document getElementById  s2   srcset this src   gt   lt  picture gt

User · Answer

Simple and neat solution involving some good answers and comment    lt img src  foo jpg  onerror  this src  error jpg  this onerror      gt    It even solve infinite loop risk   Worked for me

User · Answer

lt style type  text css  gt  img      background-image  url   images default png      lt  style gt    Be sure to enter dimensions of image and whether you want the image to tile or not

User · Answer

There is no way to be sure the myriad number of clients  browsers  that will try to view your page  One aspect to consider is that email clients are defacto web browsers and may not handle such trickamajickery      As such you should ALSO include an alt text with a DEFAULT WIDTH and HEIGHT  like this  This is a pure HTML solution   alt  NO IMAGE  width  800  height  350    So the other good answer would be slightly modified as follows    lt img src  foo jpg  onerror  if  this src     error jpg   this src    error jpg    alt  NO IMAGE  width  800  height  350  gt    I had issues with the object tag in Chrome  but I would imagine this would apply to that as well   You can further style the alt text to be VERY BIG      So my answer is use Javascript with a nice alt text fallback   I also found this interesting  How to style an image  39 s alt attribute

[html] Inputting a default image in case the src attribute of an html <img> is not valid?

Examples related to html

Examples related to image