css和js引用图片的路径问题
原文转自: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引用图片的路径问题的更多相关文章
- CSS和JS引用图片(资源)的路径问题
做项目时遇到了这个问题,特此写个笔记记一下
- 20170305深圳Meetup Rails中CSS,JS引用关系分析
新手上路,若有错误请及时提醒 Rails中CSS,JS引用关系分析 一.Rails静态文件存放位置 二.Rails中CSS引用方式 三.Rails中JS引用方式与CSS类似 四.上面都是默认引用app ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- CSS与JS中的相对路径引用
javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件, ...
- ThinkPHP的调用css,js和图片的路径
按网上的说法,在根目录下建了一个Public目录,把css,js和图片放到Public目录下,然后用__PUBLIC__/...或__ROOT__/Public/...调用.但是发现无论如何改路径都无 ...
- MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题
加载固定资源js与css <script src="@Url.Content("~/Scripts/js/jquery.min.js")" type=&q ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
- MVC在母版页设置子页面的css和js引用布局
1.在母版页中指定子页面css和js布局 @RenderSection("Styles", false) @RenderSection("Scripts", f ...
随机推荐
- git some cookies
*首先得配置和本地的操作实际上都很简单,忽略了:*git 添加远程仓库 git remote add 仓库名 url:*先pull下来,语法 git pull 远程仓库名 远程分支名[:当地分支名], ...
- .net中Web.config文件的基本原理及相关设置
11.7 使用web.config配置文件 Web配置文件web.config是Web 应用程序的数据设定文件,它是一份 XML 文件,内含 Web 应用程序相关设定的 XML 标记,可以用来简化 ...
- 传输层-TCP
UDP协议提供了端到端之间的通讯,应用程序只需要在系统中监听一个端口,便可以进行网络通讯.随着计算机网络的发展,计算机网络所承载的业务越来越多,有些业务数据的传输需要具备可靠性,譬如我们在进行在线聊天 ...
- C#基础学习第一天(.net菜鸟的成长之路-零基础到精通)
1.Net平台和C#编程语言的概念 2.桌面应用程序: 我们要使用桌面应用程序,必须要安装该应用程序的客户端. winform应用程序. Application:应用程序 Internet:互联网应用 ...
- 分享动态拼接Expression表达式组件及原理
前言 LINQ大家都知道,用起来也还不错,但有一个问题,当你用Linq进行搜索的时候,你是这样写的 var query = from user in db.Set<User>() ...
- Foj1675数论
http://acm.fzu.edu.cn/problem.php?pid=1675 首先必须知道一点数论的基本公式 (a-b) %c =0 -----> a%c=b%c 首先通过大数取余求出目 ...
- PHP MYSQL读取中文乱码的解决办法
其他试了很多种办法,结果最直接最简单的办法就是在SELECT前先发送设置.如下 mysqli_query($con,"SET NAMES 'UTF8'"); mysqli_quer ...
- 数据库 数据库SQL语句五
集合运算 union 并集(两个集合如果有重复部分,那么只显示一次重复部分) union all 并集(两个集合如果有重复部分,那么重复部分显示两次) intersect 交集 minus 差集 -- ...
- C51系列RAM寄存器表
特殊功能寄存器地址表 SFR 符号 字节 地址 位地址和位名称 D7 D6 D5 D4 D3 D2 D1 D0 P0口 P0 80H P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0. ...
- C51库函数积累
C51库函数积累: (1)_chkfloat_: 函数定义:unsigned char _chkfloat_ ( float val); /* number to check */ 函数功能:_chk ...