If the src I am using does not exist, use this src

Question

I am experiencing in issue where in cases where I do not have an image that matches the data code no image is returned. I would like it so that my function checks if the file is there before appending it to the html - if it is not an actual image that I have available; I would like it to use one specific image.

Here is the code I have so far.

            handleError: function(image) {
      image.onerror = "";
      image.src = "dog/dma/_resized/beagle.png";
      return true;
  },

    tplItem: function(id, name, regional, national) {


      var image_name = name.replace(',', '').replace(/\s/g, '').toLowerCase();
      var image_html = '<div class="st-rounded-12 img overflow-hidden">' +
        '<img src="' + this.imageDir + '/' + id + '/_resized/' + image_name + '.jpeg" alt="" onerror="handleError(this);">' +
        '</div>';

      return '<div class="columns shrink">' +
        '<div class="breeds-chart-wrapper flex-container align-bottom align-center">' +
          '<div class="breeds-chart">' +
            image_html +
            '<div class="flex-container align-bottom align-center line-chart-wrapper">' +
              '<div class="line-chart text_22_32 font_avenir_roman font-weight-bold bg-red-light color-red-light" style="height: calc(25vh/100 * ' + regional + ')">' +
                '<span class="text">' + regional + '%</span>' +
              '</div>' +
              '<div class="line-chart text_22_32 font_avenir_roman font-weight-bold bg-green color-green" style="height: calc(25vh/100 * ' + national + ')">' +
                '<span class="text">' + national + '%</span>' +
              '</div>' +
            '</div>' +
          '</div>' +
        '</div>' +
        '<div class="text-center chart-text text_22_32 color-aluminium font_avenir_roman font-weight-bold">' + name + '</div>' +
      '</div>';

write your append logic in onload event of the image

Beingnin
– Beingnin

2020-04-29 12:45:23 +00:00
Commented Apr 29, 2020 at 12:45 — Beingnin
– Beingnin, Commented Apr 29, 2020 at 12:45

Oro · Accepted Answer · 2020-04-29 14:39:52Z

1

As I understand you must add onerror attribute for your images

function handleError(image) {
    image.onerror = "";
    image.src = "/noimage.png";
    return true;
}

<img src="image.png" onerror="handleError(this);"/>

Or you can use jQuery for it:

$("img").on("error", function () {
    $(this).attr("src", "/noimage.png");
});

Or you can use modern javascript for it:

document.querySelectorAll("img").forEach((img) => {
  img.onerror = function() {
    this.src = "/noimage.png"
  }
});

In your code above you can write like this

var image_html = '<div class="st-rounded-12 img overflow-hidden">' + '<img src="' + this.imageDir + '/' + id + '/_resized/' + image_name + '.jpeg" alt="" onerror="this.onerror=null;this.src='dog/dma/_resized/beagle.png';">' + '</div>';

Also, you can add a global listener for error

document.addEventListener(
  "error",
  function(event) {
    if (event.target.tagName.toLowerCase() === "img") {
      // default image
      event.target.src =
        "https://www.petguide.com/wp-content/uploads/2013/02/pug1.jpg";
    }
  },
  true
);

https://codesandbox.io/s/wizardly-solomon-5gzcl?file=/src/index.js

edited Apr 29, 2020 at 14:39

answered Apr 29, 2020 at 12:29

Oro

2,6561 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Maciek Over a year ago

You should be consistent in naming, in HTML img tag you call different function than defined above.

AliShahVis Over a year ago

Hey Raman thanks for your response. Where should I put the function?

Oro Over a year ago

You should put it in a place where images will be access to handleError. For example in window object

Martijn Over a year ago

This coul be improved with a decent eventlistener instead of inline javascript (which, unless you have a good reason, is something you should not do)

Oro Over a year ago

Thank Martijn, I've added ways without inline javascript

|

Collectives™ on Stack Overflow

If the src I am using does not exist, use this src

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related