React - 如何处理图像/文件的 403 错误 [重复]

Posted 2023-03-31

【中文标题】React - 如何处理图像/文件的 403 错误 [重复]

【英文标题】：React - How to handle 403 errors for images/files [duplicate]

【发布时间】：2020-01-14 02:08:49

【问题描述】：

我正在向 api 发出请求，所有对象中都有一组图像，但只有其中一些返回

对于每个无法加载的图像，我都会收到错误 GET http://******/image/******/403，这是由于我的访问被拒绝，我并不担心，因为我知道某些图像将无法加载，因为这个（希望有道理）。

如果默认 http 图像返回 403，或者根本不传递后备图像，我如何缓解/绕过这种情况并传递后备图像？

我希望一切都有意义，并感谢您的帮助:)

【问题讨论】：

没有任何代码我们如何做到这一点？

请查看this checklist 并尝试编辑您的问题以提供minimal reproducible example。到目前为止，您的问题还很模糊，很难看出您在做什么以及问题出在哪里。

React 的方式是使用一个自定义的 Image 组件，该组件将首先尝试加载 Image，为其分配一个 onerror 并在此基础上设置 src。现场示例：codesandbox.io/s/sad-sound-efjus

【参考方案1】：

您可以在图像上使用onError 属性

<img src="mySuperImage.jpg" onError=handleImgError />

const handleImgError = e => 
  e.target.src = "defaultImage.jpg"

【参考方案2】：

img 标签可以接受 onError 处理程序。您可以将您的代码放在一个函数中，并将其放在图像中的 onError 处理程序中。

imageFail = (event) => 
   // your code


<img src="..." onError=this.imageFail />