JavaScript image onload: inconsistent access to resolve values from Promise

Question

I wrote this simple function to check if certain images in an array are loadable, and placed the function close to the end of the JS file:

function checkImage(img) {
    console.log(img);
    return new Promise(resolve => {
    var image = new Image();
    var imgstatus = false;
    image.onload = function() {
        console.log(image);
        console.log("img loaded");
        imgstatus = true;
        resolve(imgstatus);
    };
    image.onerror = function() {
        console.log(image);
        console.log("img error");
        imgstatus = false;
        resolve(imgstatus);
    };
    image.src = img;
    });
}

It might be an overkill because I want to do was to check if each image file defined in a user-defined ('user' as in who can also edit the source-code) image array is loadable.

FYI, the array looks like this globally defined at the top of the JS file:

var userarray=["pics/blank.png", "pics/ape.png", "pics/orange.png", "pics/pear.png", "pics/blueberries.png", "pics/peach.png", "pics/grapes.png"];

So at the beginning of the same JS script I have this implemented within an initializing function (the first function in the JS file):

if (userarray != undefined && userarray.length == (mylength + 1))
{
    var allfilespassed = 0;
    for (var i=0; i < userarray.length; i++)
    {
        var tmp;
        checkImage(userarray[i]).then(function(imgstatus){tmp=imgstatus; console.log(imgstatus);});
        console.log(tmp);
        if(!tmp)
             allfilespassed = -1;
        console.log(allfilespassed);
    }
    if(allfilespassed == 0) // all images passed
        imagearray = userarray;
    }
}

What is intriguing and frustrating to me is that in the console.logs:

pics/blank.png    //perhaps from top level console.log(img); from the checkImage(img) function.
undefined //from console.log(tmp);
-1 //from console.log(allfilespassed);
pics/ape.png
undefined
-1
pics/orange.png
undefined
-1
pics/pear.png
undefined
-1
pics/blueberries.png
undefined
-1
pics/peach.png
undefined
-1
pics/grapes.png
undefined
-1
pics/ape.png //from console.log(image); inside image.onerror of the checkImage(img) function.
img error
false //from console.log(imgstatus); inside the .then() call, back up in the initialize function.
pics/blank.png
img loaded
true
pics/orange.png
img loaded
true
pics/pear.png
img loaded
true
pics/blueberries.png
img loaded
true
pics/peach.png
img loaded
true
pics/grapes.png
img loaded
true

Obviously, the values of variable imgstatus were undefined when I run the initialize function but the inner values of function checkImage came up later to show the results are what I expected (the "false" and "true"s came up later), i.e. "ape.png" is the only misnamed file in the array. It has to do with the order and priority of functions and objects are processed in the DOM - which I may also need some pointer, in case I have been doing other things correctly.

I also tried creating something using async and await, but there was not much help: (i.e. with same output from console.log)

async function waitImage(i) {
    return await checkImage(i).then(function(imgstatus){return imgstatus;});
    };
tmp = waitImage(userarray[i]);

What I got at the top of console.log instead of those undefined entries where a bunch of Promise { "pending" } objects.

So inside the same .then() of a promise, values are accessed at different time, leading to resolve value first being undefined, and then later on, in the same .then() the values are shown correctly.

No previous posts I have browsed through have explained clearly about the timeline in terms of DOM events when Promise and its resolution happens.

Please let me know your suggestions, especially on how to make it work.