加入社区

订阅:www.yunweipai.com/feed

QQ群:
1群:201777608 - 运维综合
2群:526871767 - 运维综合
3群:1689067 - Linux Shell脚本

微博:weibo.com/tektea

微信:yunweipai(或扫描以下二维码)

合作伙伴

小猪动图 - GIF动图素材库_GIF在线工具

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”,这种一般不推荐。

转载请注明:运维派 » HTML src路径的用法

0
3.4k
1