在网页中js和css中引用图片的相对路径问题

在网页中css一般写图片的相对路径都用./(当前路径) 或../(上级路径) 或../../(上上级路径)；一直以为js也可以这么写，但今天发现js中引用图片的相对路径不能和css中引用图片似的相对于当前css代码所在的位置写相对路径。

在JS中引用图片相对路径：JS文件是指在页面中引用的外部JavaScript文件，其中可能采用JavaScript代码生成html代码，由于生成的html代码是嵌入在引用该JS文件的页面中，因此，在描述相对路径时，应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。

例如，文档“/www/yanet/index.html”中引用了JS文件“/www/yanet.cn/js/hello.js”，而在该JS中生成一段引用素材“/www/yanet/images/1.jpg”的html代码，则在这段代码中，其相对路径应该是“./images/1.jpg”或“images/1.jpg”，而不能是“../images/1.jpg”。

在CSS中引用图片相对路径：CSS文件是指在页面中引用的外部样式定义文件，该文件通常用于定义页面中各种html标记的显示效果（例如文本的字体名称、字体大小、缩进、边距等），CSS文件中同样可以引用外部的素材或文档（例如设置某个DIV对象的背景图片）。和JS文件不同，浏览器认为CSS文件也是一个独立的文档，因此，在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现，而与引用该CSS文件的页面所在的位置无关。

例如，文档“/www/yanet/index.html”中引用了CSS文件“/www/yanet/css/main.css”，而在该CSS中引用了素材“/www/yanet/images/1.jpg”，则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”，而不能是“./images/1.jpg”或“images/1.jpg”。

简单的说就是js中引用图片是根据引用的页面去定位图片路径的；css中引用图片是根据css文件来定位图片路径的。所以最好在js中定义一个全局的图片路径，方便更改。