如何在React中检查图像是否无效？

Question

我正在尝试为 React 应用程序创建某种媒体库，但问题是有时用户可能会上传一些损坏的图片，我需要以某种方式检查图像是否可以读取并且在显示之前不会损坏。 我知道

<image/>

标签上有 onerror 属性，如果第一个图像不起作用，您可以在其中显示其他图像。

 <img src={url} style={style} onError={this.hideImg}/> 

但问题是我使用带有图像背景的 div，所以它对我不起作用，而且我还需要显示一些文件已损坏的通知消息。 有谁知道在反应中显示文件之前有一些方法可以检查文件是否有效？

Answer 1

您可以在内存中（即不在页面上）创建图像，然后等待加载或出错。例如：

const Example = ({ url }) => {
  const [status, setStatus] = useState('loading');
  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      setStatus('success');
    }
    img.onerror = () => {
      setStatus('error');
    }
    img.src = url
    return () => {
      img.onload = null;
      img.onerror = null;
    }
  }, [])

  if (status === 'loading') {
    return null;
  } else if (status === 'error') {
    return <div>Error loading image</div>
  } else {
    return <div style={{ backgroundImage: `url(${url})`}} />
  }
}

Answer 2

使用 onError 处理程序。解决图像显示或不显示的问题，可以处理图像上的错误 例如

<img
 src={url}
 alt="favicon"
 style={{ width: "20px", margin: "10px" }}
 onError={(e: any) => {
 e.target.onerror = null;
 e.target.src =
 "https://via.placeholder.com/20?text=Error";
  e.target.alt = "Error loading favicon";
  }}
          />