获取未捕获的 ReferenceError：未定义函数

Question

在我看来，我正在展示一张图片：

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

我在一个名为 common.js 的单独文件中定义了函数 showNoPhotoIcon

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

我从我的视图中引用 common.js，以下行在我的视图（html 页面）的最底部

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

但是从视图中无法访问该函数，当图像丢失时，代码尝试调用showNoPhotoIcon 函数，我收到以下错误：

未捕获的 ReferenceError：未定义 showNoPhotoIcon

更新1：

收到错误后，我尝试确认该函数是否已定义 => 是否已定义。

更新2：

这似乎是时间问题，因为有时有效，有时无效。

Answer 1

我发现将处理程序代码加载到 body 元素底部的外部 JS 中会导致错误处理不一致 - 但这是您想要 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，如果是，则在附加错误处理程序后“重新加载”它

在我看来这有点 hacky，你也可以假设如果宽度为 0，图像不存在，但是，网络就是网络，你永远不知道 - 至少这样我认为你可以保证找到并“修复”所有损坏的图像

Answer 2

接受的答案解释了错误发生时未加载错误处理程序的问题。

就我而言，我将处理程序更改为使用内联 js：

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

Answer 3

您的代码看起来不错，可能是您的script 标记中的网址。尝试在同一个 html 页面中运行您的函数以仔细检查。我看不出有任何理由设置image.onerror = ""; 和return true;

最好的方法应该是对一个或多个图像应用事件监听器，这样你就不必在 html 标签中编写函数了。

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