频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
css和js关于引用图片路径的问题解析
2018-07-11 16:11:54         来源:zhengxue_er  
收藏   我要投稿

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”

点击复制链接 与好友分享!回本站首页
上一篇:移动端横向可滑动bavbar的代码实现
下一篇:前端下拉选择框html、ts或js实例讲解
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站