Если используемый мной sr c не существует, используйте этот src

Question

У меня возникла проблема, когда в случаях, когда у меня нет изображения, соответствующего коду данных, изображение не возвращается. Мне бы хотелось, чтобы моя функция проверяла, существует ли файл, прежде чем добавить его в html - если это не фактическое изображение, которое у меня есть; Я хотел бы использовать одно конкретное c изображение.

Вот код, который у меня есть.

Answer 1

Как я понимаю, вы должны добавить onerror атрибут для ваших изображений

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

Или вы можете использовать jQuery для него:

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

Или вы можете используйте для этого современный javascript:

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

В приведенном выше коде вы можете написать так:

Также вы можете добавить глобальный прослушиватель для ошибки

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