css和js引用图片的路径问题

参考:http://www.cnblogs.com/chyingp/archive/2010/08/21/1805515.html

 

html页面中,引用js脚本和css文件的机制是不一样的。

(1)对于js脚本,html是把脚本加载到页面中一起解析(就跟你的js脚本直接写在这个页面是一样的);

(2)而对css文件,则仅仅是提供一个连接,并不会将其加载到html页面中,如在下例中,html根据链接去css文件中寻找所需要的图片文件。

这两者的区别很重要,当我们要引用一个图片时,在js文件中要以引用它的html的路径为准;而在css文件中,要以该css的路径为准,而与引用该CSS文件的页面所在的位置无关,。


例如,一个简单的工程的结构如下:


在 t_imgpath0.html 文件中,通过 <img src="***"> 或者通过加载myimgjs.js控制(在myimgjs.js使用document.getElementById("myimgjs1").src = "***",实现图片加载)。

以引用它的t_imgpath0.html的路径为准,则snow.png,laptop.png,yen_coin.png,baseball-ball.png的使用路径如下:

 

snow.png"img/snow.png"             "./img/snow.png"
laptop.png"js/laptop.png"              "./js/laptop.png"
yen_coin.png"thtml/yen_coin.png"    "./thtml/yen_coin.png"
baseball-ball.png"baseball-ball.png"        "./baseball-ball.png"

 

而在thtml/ t_imgpath1.html 文件中,以引用它的t_imgpath1.html的路径为准,使用路径如下:

 

snow.png  "../img/snow.png"
laptop.png"../js/laptop.png"
yen_coin.png"yen_coin.png"    "../thtml/yen_coin.png"
baseball-ball.png"../baseball-ball.png"

 

在myimgcss.css中使用图片时,是以该css文件为基准的,因此使用的路径如下:

 

snow.png  "../img/snow.png"
laptop.png"../js/laptop.png"
yen_coin.png "../thtml/yen_coin.png"
baseball-ball.png"../baseball-ball.png"

 

转载于:https://www.cnblogs.com/anyuan9/p/6171523.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值