Получение Uncaught ReferenceError: функция не определена

Question

На мой взгляд, я показываю изображение:

<img src="https://some-host/img1.jpg" onerror="showNoPhotoIcon(this);">

Я определил функцию showNoPhotoIcon в отдельном файле с именем common.js

/*========== when image is not available ==========*/
function showNoPhotoIcon(image) {
    image.onerror = "";
    image.src = '/images/no-photo-icon.jpg'
    return true;
}

Я ссылаюсьcommon.js с моей точки зрения, следующая строка находится в самом низу моего представления (html page)

<script src="/Scripts/app/common.js"></script>

Но функция недоступна из представления, когда изображение отсутствует, код пытаетсядля вызова функции showNoPhotoIcon и я получаю следующую ошибку:

Uncaught ReferenceError: showNoPhotoIcon не определено

Update1:

После того, как я получил ошибку, я попытался подтвердить, определена функция или нет => она есть.

Update2:

Кажется, это проблема синхронизации, потому что иногда это работает, а иногда нет.

Answer 1

Я обнаружил, что код обработчика, загруженный во внешний JS внизу элемента body, делает обработку ошибок несовместимой - но именно здесь вам нужен код JS, с чем я согласен, поэтому ...

Один из способов обеспечения согласованности обработки ошибок заключается в следующем:

Во-первых, не используйте атрибут onerror

<img src="https://some-host/img1.jpg" alt="" />

Во-вторых, измените ваш showNoPhotoIcon следующим образом, поскольку он будетвызывается с событием ошибки в качестве аргумента - это упрощает removeEventListener

function showNoPhotoIcon(e) {
    const image = e.target;
    image.removeEventListener('error', showNoPhotoIcon);
    image.src = '/images/no-photo-icon.jpg'
}

Добавьте этот код в common.js

document.querySelectorAll('img').forEach(img => {
    if (img.naturalWidth === 0) {
        img.addEventListener('error', showNoPhotoIcon);
        img.src = img.src;
    }
});

Это проверяет, равна ли ширина изображения 0,если это так, то он «перезагружает» его после присоединения обработчика ошибок

На мой взгляд, это немного странно, можно также предположить, что если ширина равна 0, то изображение не существует, но сети являются сетями., вы никогда не знаете - по крайней мере, так, я думаю, вы гарантированно найдете и «исправите» все испорченные изображения

Answer 2

Принятый ответ объясняет проблему, которая заключается в том, что обработчик ошибок не загружается при возникновении ошибки.

В моем случае я изменил обработчик на использование встроенного js:

<img src="https://some-host/img1.jpg" onError="this.onerror=null; this.src='/images/no-photo-icon.jpg';"

Answer 3

Ваш код выглядит нормально, возможно, это URL в вашем теге script.Попробуйте запустить свою функцию на той же HTML-странице, чтобы дважды проверить.Я не вижу причин для установки image.onerror = ""; и return true;

. Лучше всего применять обработчик событий к изображению или к изображениям, чтобы вам не приходилось писать функцию вHTML-тег.

document.querySelectorAll('img').forEach(image =>{
     image.addEventListener('error', (e) =>{
          // load the placeholder image
     });
});