[英]Storing images in Javascript variables?
所以我很難弄清楚是否有辦法存儲保存在我的計算機上的本地圖像並將它們放入變量中，以便在調用時顯示特定圖片。 我一直在到處尋找，我一直在尋找這個答案的變化或比我正在尋找的東西更多的東西。 我知道你必須先將它們帶入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">
然后在腳本標簽中，我嘗試使用document.getElementById為我設置的每個圖像 ID 作為將它們放入變量的一種方式。
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")
我嘗試了幾種不同的方法，但我所做的一切都沒有運氣。
實際上，您可以使用 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);
是否可以先用 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");
這是調用存儲在不需要 html img 標記的 vars 中的圖像的 javascript 方法：
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>
我的圖像未加載時遇到問題，因此我嘗試以不同的方式將圖像存儲到變量中，並找到了一個非常簡單的解決方案。
在路徑中，您需要為每個文件夾放置兩個反斜杠，因為程序對一個反斜杠的解釋不同。
所以你應該這樣寫。
image.src = "C:\\\\Users\\\\tyler\\\\Desktop\\\\Javascript Crash Course\\\\Cat.jpg"
Javascript預加載圖像 - 保持變量存儲范圍與否
[英]Javascript preloading images - keeping storing variables in scope or not
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.