将 HTML <img> 元素设置为 Javascript 图像变量

Question

我有一组图像变量，这些变量使用 javascript 预加载以制作图像序列动画。我遇到的问题是将 HTML 中的 img 元素设置为使用这些图像之一。似乎所有的属性都是字符串？

这是我在 javascript 中设置图像数组的方法：

for(var i = 0; i < 30; i ++){
    anim[i] = new Image();
    if(i < 10){
        anim[i].src = "images/anim/frame0" + i + ".png";
    }
    if(i >= 10){
        anim[i].src = "images/anim/frame" + i + ".png";
    }
}

我只是有一个 ^img 标签 = “动画”^ 在我想要更改的 html 中。

Answer 1

您的代码看起来有效。

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

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

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

现在您可以： document.body.appendChild(anim[0]);

我对此进行了测试，它对我有用。

如果您想即时更改 src，则必须选择附加元素并更新其 src，如下所示：document.querySelectorAll('img')[0].src = newSourceVariable;。