无法从 HTML <img> 标签获取错误代码

Question

我尝试使用 HTML

img

来获取我的图像，并在获取失败并出现不同的错误代码（404、503）时处理错误。

但似乎不可能通过这种方法从服务器知道错误代码（如下所示）。

有什么方法可以实现这一点吗？

// in a React Component

const handleOnLoadError = (e) => {
    console.log(e);
}


// return ...
<img
     className={imageClasses}
     onLoad={handleOnLoad}
     onError={handleOnLoadError}
     src={imageURL}
 />

虽然我确实尝试编写自己的

fetch

并将结果 blob 作为

src

提供给

img

，但它可以工作，但浏览器停止缓存我的 API 响应。相反，如果 API 是从

img

发送的，它会以某种方式缓存在浏览器中。

我想保留缓存设计，但想处理来自服务器的不同错误代码，例如 503 或 404。

Answer 1

这只能使用

Image

。即

const img = new Image();

img.onerror = () => { /* handle error */ }
img.onload = () => { /* handle load */ }

img.src = imageURL;