Question

因此，我无法确定是否有办法存储保存在我的计算机上的本地图像并将它们放入变量中，以便在调用时显示某个图片。我一直在寻找各处，我一直在寻找这些答案的变化或者比我正在寻找的更多的东西。我知道你必须首先将它们带入<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">标签，你不能事先将它们放入变量中。我不希望它们立即被显示出来，只是在被引用为变量时。

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")为我设置的每个图像ID作为将它们放入变量的方式。

setTimeout(function () {
    $("#videoOverlay").fadeIn();
    document.getElementById("video").play();
}, 8000);

我尝试了几件不同的事情，但我已经完成了任何我没有运气的事情。

Answer 1

实际上，您可以使用vanilla 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提出的一些评论：

是否可以首先使用CSS隐藏所有图像根据用户的分数，显示与之对应的图像他们的分数？

你也可以轻松地做到这一点：

<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");

Answer 2

这是一种调用存储在vars中的图像的javascript方式，不需要html img标记：

＆＃13;

var aaa = "http://i.imgur.com/ZLAfFHN.jpg";
var bbb = "http://i.imgur.com/23lydbM.jpg";

function createimg(key,sizeA,sizeB) {
var theimage = document.createElement("img");
theimage.setAttribute('src', key);
theimage.setAttribute('alt', 'image');
theimage.height = sizeA;
theimage.width = sizeB;
document.body.appendChild(theimage);  
}

＆＃13;

img {
 vertical-align:top; 
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<button onclick="createimg(aaa,80,80)">Create image A</button>
<button onclick="createimg(bbb,60,60)">Create image B</button>  

</body>
</html>

＆＃13;

Answer 3

我无法加载图片，因此我尝试使用另一种方法将图片存储到变量中，并找到了一个非常简单的解决方案。

在路径中，您需要为每个文件夹放置两个反斜杠，因为该程序对一个反斜杠的解释不同。

所以你应该这样写。

image.src =“ C：\\ Users \\ tyler \\ Desktop \\ Javascript速成课程\\ Cat.jpg”

在Javascript变量中存储图像？

3 个答案:

取自OP提出的一些评论：