如何检查图像是否在反应中无效?

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})`}} />
}
}