css和js引用圖片的路徑問題
阿新 • • 發佈：2018-11-27
參考：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” |