Как обнаружить ошибку из динамически создаваемых img-элементов, используя только файл JavaScript - PullRequest
Новая
       39

Как обнаружить ошибку из динамически создаваемых img-элементов, используя только файл JavaScript

0 голосов
/ 04 января 2019

Есть ли способ определить, когда динамически созданный путь img src возвращает ошибку, не используя свойство onerror в синтаксисе HTML, а используя только файл JavaScript?

Мой HTML: 

    <img class="icon" src="/test.png" alt="Logo">

Мой JS, использующий JQuery 3.3.1: 

$(document).ready(function() {
    $(".icon").onerror = function() {
        $(this).attr('src', '/res/default-icon.jpg');
    }; 
});

Или тоже попробовал так: 

$(document).ready(function() {
    $(document).on("error", ".icon", function() {
        $(this).attr('src', '/res/default-icon.jpg');
    });
});

Но это не работает. Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Вы можете загрузить изображения, как это: 

const createImage = (src, defaultImgSrc=null) => {
  const img = new Image();
  img.triedDefault = false;
  // Specify the error callback
  img.onerror = (err) => {
    if ((defaultImgSrc != null) && (!img.triedDefault)) {
      img.src = defaultImgSrc;
      img.triedDefault = true;
    } else {
      console.error(`Failed to load image from "${src}": ${err}`);
    }
  };
  // Load the image
  img.src = src;
  return img;
};

const img = createImage("whatever/path/icon.png", "/res/default-icon.jpg");
0 голосов
/ 04 января 2019

на веб-интерфейсе вы можете установить фон по умолчанию для этих изображений: 

<img class="icon" src="/test.png" style="background:url('/res/default-icon.jpg')" alt="Logo">

или с ошибкой js: 

[].forEach.call(document.querySelectorAll(".icon"), (el) => {
    el.onerror = () =>
    {
        if (el.getAttribute("src") !== "/res/default-icon.jpg")
        {
            el.src = "/res/default-icon.jpg";
        }
    }
});
    <img class="icon" src="/test.png" alt="Logo">
    <img class="icon" src="/res/default-icon.jpg" alt="Logo">

Вы можете попробовать исправить это на бэкенде, например, установить изображение по умолчанию для nginx: 

location ~* \.(gif|jpe?g|png)$ {
    root /var/www/somesite.com;
    try_files $uri $uri/ default-icon.jpg;
}
...