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" />