原文转自:http://www.cnblogs.com/azumia/archive/2012/06/17/2552346.html

  • 在JS文件中书写相对路径:JS文件是指在页面中引用的外部JavaScript文件,其中可能采用JavaScript代码生成html代码,由于生成的html代码是嵌入在引用该JS文件的页面中,因此,在描述相对路径时,应该使用被引用的文档或素材相对于引用JS文件的页面之间的相对路径。例如,文档“/home/www/a/index.htm”中引用了JS文件“/home/www/a/js/hello.js”,而在该js中生成一段引用素材“/home/www/a/images/1.jpg”的html代码,则在这段代码中,其相对路径应该是“./images/1.jpg”或“images/1.jpg”,而不能是“../images/1.jpg”。
  • 在CSS文件中书写相对路径:CSS文件是指在页面中引用的外部样式定义文件,该文件通常用于定义页面中各种html标记的显示效果(例如文本的字体名称、字体大小、缩进、边距等),CSS文件中同样可以引用外部的素材或文档(例如设置某个DIV对象的背景图片)。和JS文件不同,浏览器认为CSS文件也是一个独立的文档,因此,在CSS中对素材的引用可以通过计算素材文件和该CSS文件之间的相对路径来实现,而与引用该CSS文件的页面所在的位置无关。例如,文档“/home/www/a/index.htm”中引用了CSS文件“/home/www/a/css/main.css”,而在该CSS中引用了素材“/home/www/a/images/1.jpg”,则在CSS中对于该素材引用的相对路径应该是“../images/1.jpg”,而不能是“./images/1.jpg”或“images/1.jpg”。
  • 因为js是根据引用的页面去定位图片路径的所以最好定义一个全局的jsp引用,这样可以设置相对路径也可以直接在全局jsp定义全局变量path在js里引用

css和js引用图片的路径问题的更多相关文章

  1. CSS和JS引用图片(资源)的路径问题

    做项目时遇到了这个问题,特此写个笔记记一下

  2. 20170305深圳Meetup Rails中CSS,JS引用关系分析

    新手上路,若有错误请及时提醒 Rails中CSS,JS引用关系分析 一.Rails静态文件存放位置 二.Rails中CSS引用方式 三.Rails中JS引用方式与CSS类似 四.上面都是默认引用app ...

  3. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  4. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  5. CSS与JS中的相对路径引用

    javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件, ...

  6. ThinkPHP的调用css,js和图片的路径

    按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无 ...

  7. MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题

    加载固定资源js与css <script src="@Url.Content("~/Scripts/js/jquery.min.js")" type=&q ...

  8. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  9. MVC在母版页设置子页面的css和js引用布局

    1.在母版页中指定子页面css和js布局 @RenderSection("Styles", false) @RenderSection("Scripts", f ...

随机推荐

  1. mvc和webapi同一解决方案调试办法

    今天在研究WebApi的时候,用mvc端直接请求webapi接口,发现怎么也请求不了,自己搞了半天,猜测可能是webapi没有完全启动吧,解决办法是将解决方案属性改为多启动项目,具体方法如下: 直接运 ...

  2. wildfly部署solr.war

    1.添加solr/home配置,有两种途径: 一个是修改solr.war包的web.xml,路径如下:solr-4.7.2.rar\WEB-INF\web.xml,添加如下内容:

  3. IKAnalyzer原理分析

    IKAnalyzer原理分析 IKAnalyzer自带的 void org.wltea.analyzer.dic.Dictionary.disableWords(Collection<Strin ...

  4. 学习WCF(1)

    1. 什么是WCF WCF是创建面向服务应用程序的一个框架,用WCF, 你可以发送异步消息. 一个服务的终结点可以是服务宿主在IIS上面,也可以是一个服务宿主在应用程序上面.一个终结点也可以是客户端的 ...

  5. asp.net微信开发第八篇----永久素材管理

    除了3天就会失效的临时素材外,开发者有时需要永久保存一些素材,届时就可以通过本接口新增永久素材. 最近更新,永久图片素材新增后,将带有URL返回给开发者,开发者可以在腾讯系域名内使用(腾讯系域名外使用 ...

  6. (转)JQuery中$.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  7. no drawer view found with gravity RIGHT(Android实现侧滑菜单从右面滑出) 解决办法

    代码如下: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width ...

  8. php Socket基础

    ◆ Socket 基础PHP使用Berkley的socket库来创建它的连接.socket只不过是一个数据结构.你使用这个socket数据结构去开始一个客户端和服务器之间的会话.这个服务器是一直在监听 ...

  9. solr集群solrCloud的搭建

    上一章讲了solr单机版的搭建,本章将讲解sole集群的搭建.solr集群的搭建需要使用到zookeeper,搭建参见zookeeper集群的安装 一.solr实例的搭建 1. tomcat安装 这里 ...

  10. iOS SearchBar为什么跳不出来第三方输入法

    去掉键盘类型就好了 // lineSearchBar.keyboardType = UIKeyboardTypeNamePhonePad;