Storing images in Javascript variables?
Question
So I'm having trouble figuring out if there is a way to store local images saved on my computer and put them into variables so that way a certain picture will display when it's called. I've been looking everywhere and I keep finding variations of this answer or things that are more than what I'm looking for. I know that you have to bring them into the body tag first, you can't just throw them into the variable beforehand. I don't want them being displayed right off the bat though, just when referenced as a variable.
<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">
Then inside the script tags I tried using document.getElementById for each image ID I set as a way to put them into the variables.
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")
I've tried several different things, but I've had no luck with anything I've done.
3 answers
solution1
1 ACCPTED 2016-02-14 20:52:58
Actually, you can create image elements using vanilla JavaScript and instantiate them prior to adding them to the document:
var img1 = document.createElement("img");
img1.src = "http://path/to/image";
...and append one using appendChild :
document.body.appendChild(img1);
document.querySelector(".some-class").appendChild(img1);
document.getElementById("someId").appendChild(img1);
Taken from some comment added to the question by the 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?
You can also do that easily:
<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");
solution2
0 2016-02-14 21:10:35
Here's a javascript way to call images stored in vars that does not needs the html img tag:
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); }
img { vertical-align:top; }
<!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>
solution3
0 2020-09-23 19:55:04
I had an issue with my image not loading so I was trying different way of storing an image into a variable and found a very very simple solution.
In the path, you need to put two backslashes for every folder because the program interprets one backslash differently.
So you should write it like this.
image.src = "C:\\\\Users\\\\tyler\\\\Desktop\\\\Javascript Crash Course\\\\Cat.jpg"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.