爲什麼圖像不會顯示在瀏覽器中？

-2

在這段代碼中，一旦我在瀏覽器中運行它，圖像就不會出現。我嘗試了不同的瀏覽器和不同的方法來排序圖像。你能告訴我爲什麼會發生這種情況，以及我將如何解決這個問題，因爲我現在一直在嘗試幾天。謝謝爲什麼圖像不會顯示在瀏覽器中？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> Traffic Light Sequence</title> 
<body> 
<h2>Manuel Traffic Light Sequence</h2> 
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"> 
<button type="button" onClick="changeLights()">Change Lights</button> 
<script> 
var list = [ 
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif", 
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif", 
    "C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif" 
]; 

var index = 0; 

function changeLights() 
{ 
    index = index + 1; 
    if (index == list.length) index = 0; 
    var image = document.getElementById('light'); 
    image.src=list[index]; 
} 
</script> 
</body> 
</html>

來源

2016-05-03 James

我猜測是因爲在文件夾名稱的空間。嘗試用％20替換它 –

您應該在body標籤前關閉頭標籤 – aldanux

<html lang="en"> 

<head> 

    <meta charset="utf-8"> 

    <title> Traffic Light Sequence</title> 
</head> 

<body> 


<h2>Manuel Traffic Light Sequence</h2> 


<img id="light" src="red.gif"> 


<button type="button" onClick="changeLights()">Change Lights</button> 


<script> 

    var list = [ 

     "red.gif", 

     "green.gif", 

     "amber.gif" 

    ]; 

    var index = 0; 

    function changeLights() { 

     index = index + 1; 

     if (index == list.length) index = 0; 

     var image = document.getElementById('light'); 

     image.src = list[index]; 

    } 
</script> 
</body> 
</html>

我已經清理了一個小的代碼。請注意，full path已從圖像中刪除。

如果圖像直接位於HTML文件旁邊，那麼HTML文件位於何處，那麼它們不需要絕對路徑（c:/...）。應該使用相對路徑。因此，假設在C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html找到HTML文件，那麼下面的代碼應該可以工作，因爲它可以很容易地找到.gif文件。

來源

2016-05-03 23:11:41

您仍然忘記關閉''。 – Xufox

謝謝，很好。雖然瀏覽器在開啓前仍會自動關閉。 –

非常感謝，這真的很有幫助。現在出現的圖像和代碼順利運行:) – James

本身有啓動的file://，C://等沒有權限訪問該網址類型（從用戶的計算機）...（在任何Web瀏覽器）

如果您的文件位於在計算機某個目錄，那麼你可以輸入文件，你會使用在同一個目錄，如：

src/styles.css，file.png等

來源

2016-05-03 23:13:13

爲什麼圖像不會顯示在瀏覽器中？

回答

相關問題