[经常搞忘]相对路径、根路径、绝对路径的区别?

jackxiang 2013-3-4 10:50 | |
背景:一群里的兄弟说在Dreamweaver里能看到图片,但是放在smarty下的网站下就不行。
于是,我初步判断是根目录的图片路径不对造成的,如下CSS样式:

问题:
问大家个事啊,为什么按钮美化,<input name="add_msg_sub" type="button" value="" style="width:38px; height:17px; background-image:url(img/pub_sub.png);"/>  dw能看效果的,但是放在smarty下的网站下就不行。

原因:Dw里的页面是根据里面的模板Html的相对路径进行展示(包括浏览器直接打开这个Html页面),一旦引入了php的smarty模板后,访问这个页面是从view.php里进行的,配置如下:


所以,在访问这个模板对应的PHP时,其实就是相对于这个view.php的路径进行配置Html页面了,如上面的:
也是相对这个view.php的路径进行定义这个模板的路径的,为此得出,这个图片的路径之所以没有出现是因为路径不对,图片是放在templates目录下的,而这个同级的目录里有view.php,于是这个图片得加上templates才行,如下:templates/img/pub_sub.png ,这样就Ok了。
对于如果在templates里的最前面加上斜杠的呢?如:templates/img/pub_sub.png  ,这样的话有可能会出现问题,如我们的网站没有建立在根目录下的情况会出现下面的问题:
图片路径前面有斜杠(注意:网站localhost的根,不是当前文件作为根。):
background-image:url(/templates/img/pub_sub.png);
访问的是:
http://localhost/templates/img/pub_sub.png
斜线开头表示是从根目录开始。

图片路径前无斜杠(这个就对了):
background-image:url(templates/img/pub_sub.png);
访问的是:
http://localhost/study/templates/img/pub_sub.png
这才是正确的。
备注:一般一个网站的根下面就是应该放上template,下面放图片css等,所以,常常我们也是写成/templates/img/pub_sub.png的居多。
————————————Add Time:2014-07-04————————————————
用css里的图片作为相对路径的办法:
/data/htdocs/ishow_devel_static/css/title_css/green.css
想把这个路径的图给拿展示:
/data/htdocs/ishow_devel_static/css/shouye/titbggreen_140320.jpg
样式如下:
.moduleblack{background:url(../shouye/titbggreen_140320.jpg) repeat-x left top;}
上面使用了相对路径,So,相对路径好,可以任意挪动,都能访问。
———群里的兄弟补课学习———
假设一个文件的url是这样的:
http://xxx.com/index/a.html
在a.html中使用路径引用
/等同于http://xxx.com/    /是web虚拟目录的根
../等同于http://xxx.com/  ../是当前文件的上一级目录
./等同于http://xxx.com/index/   ./是当前文件目录
————————————————————————————
【活跃】[武汉]中庸
假设一个文件的url是这样的:
http://xxx.com/index/a.html
在a.html中使用路径引用
/等同于http://xxx.com/
../等同于http://xxx.com/
./等同于http://xxx.com/index/

【吐槽】[北京]向东-Jack 14/7/4 星期五 下午 05:41:14
中庸的示例挺靠谱的。

【吐槽】[北京]向东-Jack 14/7/4 星期五 下午 05:41:34
那css里的背景图片相对路径是相对调用的html来讲的么?
【活跃】[武汉]中庸
14/7/4 星期五 下午 05:42:00
/是web虚拟目录的根
./是当前文件目录
../是当前文件的上一级目录
理解了这个你自己再慢慢琢磨

[北京]向东-Jack(372647693)  17:41:14
中庸的示例挺靠谱的。
那css里的背景图片相对路径是相对调用的html来讲的么?
不一定,如果css和html同一个文件或者同一个目录,可以这么理解,如果css文件是单独的目录,那么就要以css文件所在的目录为基准

作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:http://jackxiang.com/post/6083/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!


最后编辑: jackxiang 编辑于2014-7-4 17:46
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]