如何从React.js中的数组中选择第一个工作图像源

Question

因此，我正在映射API响应中的一些图像，它们带有五个img源（URL）的数组。默认情况下，图像的src应该是给定数组中的第一个url，但是在某些情况下url被破坏了，应该用下一个有效的url替换从数组。我尝试做这样的事情：

<img src={snapshots[0]} alt="" onError={(e) => this.onError(e, snapshots)} />

imageExists = url => {
        let img = new Image();
        img.src = url;
        
        if (img.width !== 0) {
            return true
        } else {
            return false
        }
        
      }

onError = (e, snapshots) => {
        
       if (this.imageExists(snapshots[1])) {
            e.target.src = snapshots[1]
       } else if (this.imageExists(snapshots[2])) {
            e.target.src = snapshots[2]
        } else if (this.imageExists(snapshots[3])) {
           e.target.src = snapshots[3]
        } else if (this.imageExists(snapshots[4])) {
            e.target.src = snapshots[4]
        } else {
            e.target.src = 'https://via.placeholder.com/400x300'
       }

        
    }

但是有时这种检查方法有效，有时却无效，即使存在有效的URL，它也会跳到占位符图像。有什么建议吗？