HTML無法顯示圖像，如何寫圖像路徑？

Question

如果我將圖像保存在與html文件相同的文件夾中，圖像顯示正確。

<div class="screenshot"><img src="app.png" alt="This is a screenshot"></div> 

如果我的圖像保存到不同的文件夾稱爲映像（平行平與所述HTML文件夾的文件夾），則不能被顯示的圖像。

src="images/app.png" 

問題必須是錯誤的路徑，那麼上面的路徑有什麼問題？

Answer 1

對於下面的目錄結構：

/ 
|-- html/ 
    |-- yourfile.html 
    |-- kitty.jpg 
    |-- pics/ 
     |-- puppy.jpg 
|-- images/ 
    |-- app.png 

下面的所有內yourfile.html會顯示您的圖片：

<img src="kitty.jpg"> 
<img src="pics/puppy.jpg"> 
<img src="../images/app.png"> 

如果我正確理解您的文章，最後一行是你的情況。

Answer 2

src="images/app.png"表示在當前文件夾內的images文件夾中查找名爲app.png的圖像。如果這些文件夾是兄弟姐妹，請嘗試src="../images/app.png"，其中..意味着向上移動一個級別。

Answer 3

將圖像文件夾移動到您的HTML文件夾中。

Answer 4

如果您的HTML文件夾不是你的項目的潰敗文件夾，你必須使用此路徑：
<img src="../images/app.png">
兩個點帶您回到狂勝文件夾。

Answer 5

圖像路徑（或任何外部文件，如.mp4，.pdf，.jpg）與請求頁面的位置直接相關。爲了幫助我記住，當我需要使用../和多少時，我想到着陸的樓梯。我需要將文件放在與我需要向下訪問圖像或文件的一系列文件夾相同的「着陸」上。

_media (folder) 
     _images (folder) 
      common (folder) 
       app.png (image) 
      navigational (folder) 
    contentA (folder) 
     contentA.html (html) 
     image.png (image) 
    index.html (html) 

因此，如果您正在使用的index.html，需要包括app.png圖像，你將它作爲：

<img src="_media/_images/common/app.png" /> 

這是因爲index.html文件和_media文件夾在相同的「着陸」上。但是，如果您正在處理從index.html文件訪問的文件夾內的文件，則必須更改路徑以包含圖像。例如，如果我想包括在位於該contentA文件夾中的contentA.html的app.png形象，路徑圖像，你將包括爲：

<img src="../media/_images/common/app.png" /> 

的../表示向上移動一個文件從當前級別。 （轉到相同的着陸點。）由於contentA.html位於文件夾contentA中，因此我們需要向上移動以與index.html保持一致，才能移動到_media。

最後，如果文件和圖像位於完全相同的文件夾中，則不必備份步驟。例如，如果我想包括在位於該contentA文件夾中的contentA.html的image.png形象，路徑圖像，你會包括如最初在問題提出：

<img src="image.png" />