無法使用 javascript 顯示圖像
[英]Not able to display image using javascript
問題描述
我正在使用 VSCODE 使用 HTML、CSS 和 javascript 制作二十一點游戲。 我定義了一個按鈕，點擊后會給出一個圖像（存儲在計算機中）。 每次我刷新實時服務器（chrome）時，它都會說不允許加載本地資源並且無法加載資源：404 未找到。 我是網絡開發的新手，需要這個項目的幫助。
let blackjackGame = {
'you': {'scoreSpan': '#your_blackjack_result', 'div':'#your_box', 'score':0 },
'dealer': {'scoreSpan': '#dealer_blackjack_result', 'div':'#dealer_box', 'score':0 }
};
const YOU = blackjackGame['you']
const DEALER = blackjackGame["dealer"]
function blackjackHit() {
var cardImage = document.createElement('img');
cardImage.src = 'D:\Software Course\JS-Basics\Blackjack\images\Q.png';
document.querySelector(YOU['div']).appendChild(cardImage);
}
document.querySelector("#blackjack_hit_button").addEventListener("click", blackjackHit);
3 個解決方案
解決方案1
2 2021-07-29 18:07:29
每次刷新實時服務器（chrome）
Web 應用程序從服務器運行，即使它是本地安裝的或僅臨時托管在 Visual Studio 中的應用程序。 因此，此路徑將不起作用：
cardImage.src = 'D:\Software Course\JS-Basics\Blackjack\images\Q.png';
因為這是文件系統路徑，而不是 Web 服務器 URL。 出於安全原因，瀏覽器不想混合這些。 而是提供文件的 URL。 這可能是這樣的：
cardImage.src = '/images/Q.png';
查找 URL 完全取決於您。 但它將是相對於在瀏覽器中查看的頁面的 URL 的一些路徑。
解決方案2
2 2021-07-29 18:12:41
您必須使用計算機中正確的本地路徑。 然后將反斜杠 () 更改為正斜杠 (/) 並在路徑前添加“file:///”，因此：
cardImage.src = 'file:///D:/Software Course/JS-Basics/Blackjack/images/Q.png';
解決方案3
0 2021-07-29 18:09:42
function display_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// This next line will just add it to the <body> tag
document.body.appendChild(img);
}
添加圖片
無法在 mozila 中使用 TOM 和 javascript 顯示頁腳
[英]not able to display footer using TOM and javascript in mozila
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.