向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

背景：一群里的兄弟说在Dreamweaver里能看到图片，但是放在smarty下的网站下就不行。
于是，我初步判断是根目录的图片路径不对造成的，如下CSS样式：
<input name="add_msg_sub" type="button" value="" style="width:38px; height:17px; background-image:url(img/pub_sub.png);"/>  
问题：
问大家个事啊，为什么按钮美化，<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里进行的，配置如下：
$smarty_template_dir       = './templates/'; $smarty->display("view.html");

所以，在访问这个模板对应的PHP时，其实就是相对于这个view.php的路径进行配置Html页面了，如上面的：
$smarty_template_dir = './templates/';也是相对这个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应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/6083/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！