likes
comments
collection
share

HTML标签 之 img 路径

作者站长头像
站长
· 阅读数 25

在网页开发中，我们通常会用到很多的图片等素材，如果把所有文件都放在一个目录下会相当混乱，一般我们会创建一个专门放资源文件的文件夹。

但我们在 html 中引用素材时，就要注意素材的路径了。路径可以分为相对路径和绝对路径。

相对路径

相对路径以引用文件所在位置为参考。假如我们要添加一个 <img> 标签，那相对路径就是指图片相对于 html 文件存放的位置。

<img src="a.jpg" />        //图片和 html 文件在同一级
<img src="src/a.jpg" />        //图片位于 src 目录下， html 文件 和 src 文件夹在同一级
<img src="../a.jpg" />        //图片位于 html 文件的上一级

绝对路径

绝对路径是指目录下的绝对位置，直接到达目标位置。

<img src="D:\web\img\a.jpg" />        //windows
<img src="/Users/BlueBlue/Documents/web/img/a.jpg" />        //Mac
<img src="https://avatar-static.segmentfault.com/882/946/882946901-628612a219f22_huge256"        //完整的网络地址