Update img src if image does not exist

Question

I have 2 possible images to show. If the first one exists, show it; if not, show the second one

This code will be shown in multiple pages so if the first image doesn't exist, it shows it src either as "undefined" or "unknown" So I need to specify this 2 instances

I was trying the following, but as soon as I add the "or unknown" it breaks:

<div id="section-heading">
  <div id="topBannerG" class="groupImageHidden">
    <img src="(unknnown)">
  </div>
  <div id="topBannerG" class="groupImageHidden">
    <img id="ctl00_ctl26_imgBanner" src="image.jpg">
  </div>
</div>

$(document).ready(function() {
  var imageDef = $("#topBannerG.groupImageHidden img");

  if (typeof imageDef == "undefined") || (typeof imageDef === "unknown") {
    var imgHref = $('.groupImage img').attr("src");
    $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth groupImage"><img src="' + imgHref + '" style="border-width:0px;"></div> ');
  } else {
    var imgTopHref = $('#topBannerG img').attr("src");
    $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth msl-pagebanner"><img id="ctl00_ctl26_imgBanner" src="' + imgTopHref + '" style="border-width:0px;"></div> ');
  }
});

If by "doesn't exist" you mean "fails to load", you need to add an event listener to determine if it loaded or not: https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript — , May 16 '19 at 10:13
You can solve this with just CSS btw: https://jsfiddle.net/khrismuc/wrn8jbof/ — , May 16 '19 at 10:17

score 1 · Accepted Answer · answered May 16 '19 at 10:13

You've made this more complicated than it needs to be. The simplest way to achieve what you require is to add the img to the DOM with the original src URL. Then add an error handler in JS which is called if the image fails to load. At that point you can then update the src to an image which you know works. Something like this:

$('#topBannerG img').on('error', function() {
  this.src = 'https://i.imgur.com/CbsGGVp.jpg';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="section-heading">
   <div id="topBannerG" class="groupImageHidden">
        <img src="invalid.jpg" />
   </div>
</div>

score 0 · Answer 2 · answered May 16 '19 at 10:30

I have fixed your code with same logic hope it will help!

$(document).ready(function() {
  //var imageDef = $("#topBannerG.groupImageHidden img");
  var imageDef1 = document.querySelectorAll("#topBannerG.groupImageHidden img")
  //console.log("imageDef--",imageDef1)
  imageDef1.forEach(function(imageDef) {
    console.log("imageDef-", imageDef.src)
    if (imageDef.src == "" || imageDef.src == '') {
      var imgHref = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpFBWqwBWz1PssMHzubdkMu9dMhzd1HCScBqc0ReHNeCDvtYStWA';
      $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth groupImage"><img src="' + imgHref + '" style="border-width:0px;"></div> ');
    } else {
      var imgTopHref = imageDef.src;
      $('#section-heading').prepend('<div id="topBannerG" class="mslwidget maxWidth msl-pagebanner"><img id="ctl00_ctl26_imgBanner" src="' + imgTopHref + '" style="border-width:0px;"></div> ');
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-heading">
  <div id="topBannerG" class="groupImageHidden">
    <img src(unkown)>
  </div>

  <div id="topBannerG" class="groupImageHidden">
    <img id="ctl00_ctl26_imgBanner" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/1280px-Logo_Google_2013_Official.svg.png">
  </div>

</div>

Update img src if image does not exist

2 Answers2