javascript - image does not exist show default image popup window in leaflet

Question

In Leaflet I have an link in the popup window that opens a new window with the related image, if the image is missing it freeze the application, to solve that I create a default image with the same name. The problem is that I have to do this for each missing image and would rather in some way use a default image (NoImage.jpg) instead of cluttering the folder with blank images, will be a awful work to do when thousands can be missing in the end. When searched I find this little function but have not been able to implement with the popup function. How can this be solved? Looking into put a small thumbnail of the image in the popup window and put a hyperlink on the thumbnail, red alert "Noimage" image might be the best thing when images are missing. Somehow the popup should be able to show if an image exist or not...

Function I picked up and tried to implement

function checkImage(src, good, error) {
  var img = new Image();
  img.onload = good;
  img.onerror = bad;
  img.src = src;
}
// Test to see if function worked ****
// checkImage(
 // "http://jsfiddle.net/img/logo.png",
 //function () { alert(this.src + " " + "good"); },
 //function () { alert("bad"); }
//);
// ********************************

My popup window

  onEachFeature: function (feature, layer) {
    var popupText = "";

    popupText += feature.properties.blId
      ? "<br>ID:u00A0<b>" + feature.properties.blId
      : "";

    popupText += feature.properties.name
      ? "</b><br>Name:u00A0<b>" + feature.properties.name
      : "";
    
// here I want to be able to show a default image
// if the "original" is missing ... (1)
    popupText += feature.properties.blId
      ? "</b><b>" +
        '<a href="/data/images/myimages/' +
        feature.properties.blId +
        '.jpg"' +
        'target="_blank"' +
        ">Show image in new window</a>"
      : "";

    layer.bindPopup(popupText, {
      closeButton: true,
      offset: L.point(0, -20),
    });
    layer.on("click", function () {
      layer.openPopup();
    });
  },

(1) This is what I tried with no success, popup says "undefined"

popupText += feature.properties.blId
  ? checkImage(
      "/data/images/myimages/" + feature.properties.blId + ".jpg",
      function () {
        return (
          "</b><b><a href" +
          this.src +
          'target="_blank"' +
          ">Show image in new window</a>"
        );
      },
      function () {
        return (
          "</b><b>" +
          '<a href="/data/images/myimages/NoImage.jpg"' +
          'target="_blank"' +
          ">Show image in new window</a>"
        );
      }
    )
  : "";

question from:https://stackoverflow.com/questions/65861047/image-does-not-exist-show-default-image-popup-window-in-leaflet

Answer 1

Waitting for answers