img标签无法显示图片

发表于 | 分类于 |
字数统计: 542 | 阅读时长 ≈ 2

很多博客都说是因为src属性给了绝对路径，而导致图片无法显示，应该写相对路径。绝对路径和相对路径又都是什么呢？
百度告诉我绝对路径是无论从内部还是外部都可以通过此路径找到目标，而相对路径只能通过内部访问。看完还是不太清楚，继续搜索。。。

绝对路径是指存在硬盘上的位置，比如我的圣诞树.png的绝对路径为D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo。我打算在我的img.html文件中用图片圣诞树.png，图片圣诞树.png相对于文件img.html的路径称为相对路径，比如我的圣诞树.png存放位置是D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo，我的img.html存放位置也是D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo，也就是说文件和图片在同一个目录下，于是 

1
<img src="圣诞树.png"/>

浏览器上运行图片显示成功。
那，为什么绝对路径不行呢？使用绝对路径的话，在自己的计算机上浏览可能一切正常（ps:我用绝对路径在自己电脑上都不正常）但是上传到web服务器就很有可能不会显示图片。所以说，就使用相对路径吧。
如果图片和文件不在同一目录下呢？

  • 上一级
    我将图片放到了D:\Program Files (x86)\Adobe Dreamweaver CS6，文件仍然在D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo。失败。将代码改为 
    1
    <img src="../圣诞树.png"  />
    浏览器上运行图片显示成功。
  • 下一级
    我将图片放在了D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo\img，文件仍然在D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo。失败。将代码改为 
    1
    <img src="img/圣诞树.png"  />
    浏览器上运行图片显示成功。
    在解决问题的过程中，还接触到一个虚拟根目录的概念，比如我将图片放在下一级时，/img/圣诞树.png img前面的/就是虚拟根目录，它虚拟了D:\Program Files (x86)\Adobe Dreamweaver CS6\HTML demo。