javascript - 在 Javascript 变量中存储图像？

Question

所以我很难弄清楚是否有一种方法可以存储保存在我的计算机上的本地镜像并将它们放入变量中，以便在调用时显示特定的图片。我一直在到处寻找，并且不断发现这个答案的变体或超出我所寻找的东西。我知道你必须首先将它们放入 body 标记中，不能只是预先将它们放入变量中。不过，我不希望它们在作为变量引用时立即显示。

<img src="project1pics/groot.jpg" id="groot">
<img src="project1pics/starlord.jpg" id="starLord">
<img src="project1pics/rocket.jpg" id="rocket">
<img src="project1pics/gamora.jpg" id="gamora">
<img src="project1pics/drax.jpg" id="drax">

然后在脚本标签内，我尝试对设置的每个图像 ID 使用 document.getElementById 作为将它们放入变量的方式。

var groot = document.getElementById("groot")
var starLord = document.getElementById("starLord")
var rocket = document.getElementById("rocket")
var gamora = document.getElementById("gamora")
var drax = document.getElementById("drax")

我尝试了几种不同的方法，但我所做的一切都没有运气。

Answer 1

实际上，您可以使用普通 JavaScript 创建图像元素并在将它们添加到文档之前实例化它们:

var img1 = document.createElement("img");
img1.src = "http://path/to/image";

...并使用 appendChild 附加一个:

document.body.appendChild(img1);
document.querySelector(".some-class").appendChild(img1);
document.getElementById("someId").appendChild(img1);

摘自OP添加到问题中的一些评论:

Is it possible to hide all the images at first with CSS, then depending on the user's score, display the image that corresponds to their score?

您也可以轻松做到这一点:

<img id="score1" class="hidden">
<img id="score2" class="hidden">
<img id="score3" class="hidden">

.hidden { display: none; }

var score2Element = document.getElementById("score2");
score2Element.classList.remove("hidden");