Javascript 找出加载的图像是否无效（例如，是404错误页面）

是否有人知道一种方法，我如何才能知道加载的图像是否不是图像，因为返回了404错误

如果出现错误，我希望将我的图像URL设置为例如白色图像

---

我不能使用像404错误处理或servlet这样的服务器端技术，因为我想用Amazon S3为我的图像提供服务，Amazon S3没有错误处理或重定向到“默认文件”，以防找不到请求的图像。

你可能会发现这个问题的答案很有用。它使用jQuery，但检测图像未正确加载到浏览器中的想法处理得很好。

image

类有一个

addErrorHandler

方法。注册一个错误处理程序，如果映像未正确加载，将触发该处理程序。在此处理程序中，您可以将映像设置为默认映像。

不确定当询问此问题时错误处理的状态是什么，但S3当前有404个错误处理。我用它按需生成拇指

设置静态网站托管的bucket

在静态网站托管部分下添加重定向规则，例如：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals/>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>yoursite.com</HostName>
      <ReplaceKeyPrefixWith>image/generate/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

在我的情况下，我用它来传递缩略图

下面是一个用例：

<img src="http://awsbucketurl.com/thumb_cat.jpg">

这导致S3触发404，然后用url调用我的站点。我看到它的前缀是“thumb_uz”，然后将从S3获取cat.jpg，调整大小，将thumb上传到S3以备下次使用，并将其交付给本次会话的浏览器

一个警告：如果图像被缓存系统调用，那么它将不会在404之后接收新图像，而是存储丢失的图像。

看看这个答案：

<img src="http://awsbucketurl.com/thumb_cat.jpg">