非原创,转自:http://blog.sina.com.cn/s/blog_6c21f6480101cb33.html

【问题描述】:

比如你有Web项目solo,假如目录结构如下:

在cy.css中有如在根目录的一个index.html文件被引用到如下代码:

body {
    background-image: url("/skins/cy/images/icons.png");
}
    接着你扑哧扑哧的在本地用tomcat把部署起来,正当你在能看到首页而欢欣鼓舞之时,然而你发现了背景没其效果,如下图:

但是你这样打开http://localhost:8080/solo/skins/cy/images/icons.png那图片又是存在的,那这个何解呢?

【问题分析】:

这个真的可以算是噩耗了,但我们能做的只能慢慢分析原因了。

究其原因,还是路径的问题。

作为web开发,你很容易以为/..就是指的是contextPath了,也就是项目根目录了,这个可能惯性了。其实,在css的资源定位中,/..其实指得是根路径,但是这个根路径和我上边的说得还是有出入的,这个取决于你的项目在服务器中的部署位置,这个往往又是和服务器的具体设置有关系的。

【问题解决】:

方法一:

改用相对定位,这个想必都会,需要注意的是,相对定位中,当前位置就是CSS文件所在目录。改为:

background-image: url("../images/icons.png");

方法二:

改用还是绝对定位,假如服务器没做任何设定,并且项目没有部署到tomcat下webapps的ROOT目录下,由于CSS的/..定位到的http://localhost:8080。那么改为:

background-image: url("/solo/skins/images/icons.png");

方法三:

显然就是在服务器端做文章了,使用根路径部署,css文件就不用动,以下两者选其一:

1,部署到tomcat下webapps的ROOT目录,你需要这样做,部署包重命名为 ROOT.war 并移到部署目录下,例如 d:/tomcat/webapps/ROOT.war,那么/..就会指向http://localhost:8080/solo

(假如你是b3log那么建议,你在latke.properties把contextPath和staticPath都别设定)

2,更改tomcat的配置,如下修改(更多信息请自己搜了咯)
         找到tomcat的server.xml(在conf目录下),找到
    unpackWARs="true" xmlValidation="false" xmlNamespaceAware="false">。在前插入

其中D:/eclipsepath/workspace/solo/就是我想设置的网站根目录,然后重启tomcat。

再次访问http://localhost:8080时,就是直接访问D:/eclipsepath/workspace/solo/目录下的文件了。

关于html/css的路径问题的更多相关文章

  1. JavaScript与CSS相对路径引用的差异

    转自:http://blog.csdn.net/luohuidong01/article/details/74938652 JS跟CSS相对路径引用的差异在于他们的参考点不一样,下面举个例子说明一下. ...

  2. 修改easyui的easyloader的默认css目录路径

    easyloader默认情况下会使用js文件所在目录下的themes文件夹中的css,这里改成项目自定义的css文件夹. 首先找到: var m=src.match(/easyloader\.js(\ ...

  3. 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。

    今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...

  4. Nginx 安装及配置、负载均衡https网站及转发后页面js、css等路径找不到问题、更换证书导致问题解决

    官网下载nginx:http://nginx.org/en/download.html 安装nginx编译环境:yum install -y gcc-c++ 安装pcre库解析正则:yum insta ...

  5. 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题

    在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...

  6. 使用extract-text-webpack-plugin处理css文件路径问题

    首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...

  7. nginx资源定向 css js路径问题

    今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...

  8. Css中路径data:image/png;base64的用法详解

    今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...

  9. Css中路径data用法

    Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入. data:,文本数据 data:text/plain,文本数据 data: ...

随机推荐

  1. 【直播预告】7月25日3D游戏引擎免费公开课答疑第三期,有奖问答!

    喜讯喜讯! 为了酬谢广大学员.CSDN学院特推出iOS和3D游戏引擎开发免费技术答疑公开课.让您度过一个充实的暑假~ 參与本次公开课,进行有奖问答.即有机会获奖. 答疑公开课时间:7月25日 晚7:3 ...

  2. All the best open source and Software as a Service (SaaS) tools in one place 工具 工欲善其事必先利其器

    Open Source & SaaS Tools | StackShare https://stackshare.io/categories AfterShip/SaaS: List of S ...

  3. 小程序 swiper banner 图片 居中

    var imgUrlApp = getApp().globalData.imgUrlApp; Page({ /** * 页面的初始数据 */ data: { indicatorDots: true, ...

  4. JavaScript数组的某些操作(一)

    在软件开发的过程中JavaScript的编程在所难免.当中对数组的操作尤为常见,这里介绍一下和JavaScript数组相关的某些操作: 1.删除并返回数组的第一个元素--shift方法: <!D ...

  5. Java 快速失败( fail-fast ) 安全失败( fail-safe )

    原文:http://www.cnblogs.com/ygj0930/p/6543350.html 快速失败( fail-fast ):当你在迭代一个集合的时候,如果有另一个线程正在修改你正在访问的那个 ...

  6. 静态代理、动态代理和cglib代理

    转:https://www.cnblogs.com/cenyu/p/6289209.html 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处 ...

  7. HDU 2222 Keywords Search(瞎搞)

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  8. 逻辑运算符,if、swtch语句(java基础知识三)

    1.逻辑运算符的基本用法 * A:逻辑运算符有哪些 &(逻辑与) |(逻辑或) !(逻辑非) ^(逻辑异或) &&(短路与) ||(短路或) * 注意事项: * a:逻辑运算符 ...

  9. eclipse创建maven项目出现以下报错: org.apache.maven.archiver.MavenArchiver.getManifest (org.apache.maven.project.MavenProject,org.apache.mav en.archiver.MavenArchiveConfiguration)

    解决方法: 更新eclipse中的maven插件 Help ->  Install New Software -> add ->  http://repo1.maven.org/ma ...

  10. Oracle:ORA-01790: expression must have same datatype as corresponding expression

    今天有现场报sql错误,错误sql语句 类似  select * from  tableA  where (exists  条件A   or exists 条件B), 单独执行  select * f ...