How to add element components from in and out of promise

I am trying to create an image with it's source set to a download url which is retrieved by a .getDownloadURL() function from firebase.

I also want to set the id of the image to the firebase storage path, so I can get the name of the image.

The issue however, is that when I try to make the path inside the .getDownloadURL() function, it says "can't get location of undefined", because the scope of the path variable doesn't reach inside.

My attempt at a solution was to create the image and add the id before entering the .getDownloadUrl() function, but then I can't set the .src of img inside of the 'getDownloadURL()' function because img is undefined.

Anyway I would appreciate any help, thanks for your time.

Here is my code:

for(n=0; n<subarray.length; n++){
    //add image with url src
    var path = subarray[n].location.path_; //I want the img ID to be this
    var img = document.createElement("IMG"); //this is the IMG
    img.id = path;


    storage.ref(subarray[n].location.path_).getDownloadURL().then(function(url){
        img.src = url; //error says cannot set .src of undefined
        column = "column" + columnNr //columnNr is defined earlier as 1
        columnNr = columnNr + 1;
        if(columnNr > 4){
            columnNr = 1;
        }


         document.getElementById(column).appendChild(img);
    });
}