Set Html Element To Javascript Image Variable

I have an array of image variables that get preloaded using javascript to make an image sequence animation. The issue I have is setting the img element from HTML to use one of thes

Solution 1:

Your code looks valid.

for(var i = 0; i < 30; i++){
    anim[i] = newImage();

    if(i < 10){
        anim[i].src = `images/anim/frame0${i}.png`;
    }

    if(i >= 10){
        anim[i].src = `images/anim/frame${i}.png`;
    }
}

Now you can do: document.body.appendChild(anim[0]);

I tested this and it works for me.

If you want to change src on the fly then you'd have to select the appended element and update its src like this: document.querySelectorAll('img')[0].src = newSourceVariable;.