How do I load sequential images until one doens't exist?

I have a number of images in several directories, and I want to be able to load all of the images in a specific directory. E.g.,

directory-1
|
---- panel-1.png
| |- panel-2.png
| |- panel-3.png
|
directory-2
|
---- panel-1.png
  |- panel-2.png

I have a number of these directories, and there is no patte to how many panel images are in each directory.

I want to load all the images in this directory.

My first approach was to load images until I get a 404 error. However, this doesn't seem to work.

const imagesLength = _(Array(15)).map((val, i) => {
    const img = new Image
    let valid = true
    img.onerror = () => {
        console.wa('error loading')
        valid = false
        retu false
    }
    img.onload = () => {
        if (_.includes(img, 'naturalHeight')) {
            if (img.naturalHeight + img.naturalWidth === 0) {
                console.log(img.naturalHeight, img.naturalWidth)
                img.onerror()
                valid = false
                retu false
            }
        } else if (img.width + img.height === 0) {
            console.log(img.width, img.height)
            img.onerror()
            valid = false
            retu false
        }
    }
    img.src = `/images/panel-${i+1}.png`

    retu valid // logic being, if valid is false it'll exit out of loop
}).compact().size() // I get 15

Not only am I getting the wrong number of 'valid' images, I am also still getting 404 errors. I thought handling errors with onerror was supposed to suppress 404 errors.

Other things I've tried:

• try / catch
• _.attempt

Anything else I can ry?