HTML src路径的用法

前段时间，被一个Web静态服务器的目录问题搞混淆了，后来尝试了几次，总结在这里给有需要的同学。

我用的是Express，使用了它的静态目录的功能（类似apache https的静态目录服务），将一个目录 product/, image/ 给外部直接访问，我的目录结构为：
/static/
|
|__product/
| |
| |__index.html
|
|__image/
| |
| |__f.jpg

我将static目录作为静态服务器的根目录，那么就可以做如下访问，如：http://localhost/product/index.html，我在index.html中写了如下的html代码：
<image src=“f.jpg”>

当我在浏览器中访问http://localhost/product/index.html时候，无法找到f.jpg，然后我直接访问这个图片可以访问到 http://localhost/f.jpg （因为image目录也作为静态服务器，可以直接访问下面的文件）。通过调试发现图片地址变成了 http://localhost/product/f.jpg。

这是为什么？

通过不断尝试，我发现了html src属性的三种写法

1. 1. 相对路径

就是我例子中的, src=“f.jpg”，这种写法，默认是相对于当前地址的，如 http://localhost/product/index.html里面的src=“f.jpg”就是相对于product这个路径。所以就出现了上面的问题。

2.绝对路径
我通过将 src=“f.jpg”改为 src=“/f.jpg”，问题解决了。这种写法的意思是告诉浏览器，在我当前的站点名下，访问此地址，那么就是：http://localhost/f.jpg。

1. 3. 跨站点绝对路径

src=“http://localhost/f.jpg”，这种一般不推荐。

本文链接：https://www.yunweipai.com/2806.html