关于html/css的路径问题
非原创,转自: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的路径问题的更多相关文章
- JavaScript与CSS相对路径引用的差异
转自:http://blog.csdn.net/luohuidong01/article/details/74938652 JS跟CSS相对路径引用的差异在于他们的参考点不一样,下面举个例子说明一下. ...
- 修改easyui的easyloader的默认css目录路径
easyloader默认情况下会使用js文件所在目录下的themes文件夹中的css,这里改成项目自定义的css文件夹. 首先找到: var m=src.match(/easyloader\.js(\ ...
- 使用Maven构建Java Web项目时,关于jsp中引入js、css文件路径问题。
今天有点闲,自己动手搭建一个Java Web项目,遇到jsp中引入js.css文件时路径不正确的问题,于是在网上查阅了很多资料,最终都无法解决问题,于是,上stackoverflow找到了解决方法,这 ...
- Nginx 安装及配置、负载均衡https网站及转发后页面js、css等路径找不到问题、更换证书导致问题解决
官网下载nginx:http://nginx.org/en/download.html 安装nginx编译环境:yum install -y gcc-c++ 安装pcre库解析正则:yum insta ...
- 关于WEB-INF目录不提供外部访问及JSP引用 js,css 文件路径问题
在 web 项目开发过程中,我们常常使用到 JSP,以及对静态资源,js,css 等引用,但是我们应该把这些资源文件放在哪个目录下面咧,怎么引用. 当然如果是前后端分离的项目倒不用考虑这些. WEB- ...
- 使用extract-text-webpack-plugin处理css文件路径问题
首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...
- nginx资源定向 css js路径问题
今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...
- Css中路径data:image/png;base64的用法详解
今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...
- Css中路径data用法
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入. data:,文本数据 data:text/plain,文本数据 data: ...
随机推荐
- 中断线程Interrupt()
以下是参考<<Java多线程模式>>的 1. sleep() & interrupt() 线程A正在使用sleep()暂停着: Thread.sleep(100000) ...
- 组合式+迭代式+链式 MapReduce
1.迭代式mapreduce 一些复杂的任务难以用一次mapreduce处理完成,需要多次mapreduce才能完成任务,例如Pagrank,Kmeans算法都需要多次的迭代,关于mapreduce迭 ...
- swift的String处理
import UIKit import CoreText class ViewController: UIViewController { override func viewDidLoad() { ...
- TCO 2016 Round 1B
problem 250 Problem Statement Vasa likes to construct sequences of numbers. If you tell him a positi ...
- phpMVC框架的核心启动类定义
<?php//核心启动类class Framework { //定义一个run方法 public static function run(){ // echo "hello,wrold ...
- C++ main函数中参数argc和argv含义及用法
argc 是 argument count的缩写,表示传入main函数的参数个数: argv 是 argument vector的缩写,表示传入main函数的参数序列或指针,并且第一个参数argv[0 ...
- 「LuoguP3384」【模板】树链剖分
题目描述 如题,已知一棵包含N个结点的树(连通且无环),每个节点上包含一个数值,需要支持以下操作: 操作1: 格式: 1 x y z 表示将树从x到y结点最短路径上所有节点的值都加上z 操作2: 格式 ...
- FTOUR2 - Free tour II
传送门 题目翻译的很清楚……似乎点分治的题题目描述都非常简洁. 还是那个操作,一条路径要么全部在一棵子树中,要么经过当前的重心,所以考虑点分治. 首先dfs求出重心的每一棵子树中,有i个黑点的最长路径 ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- vue-resourse 提交表单 使用formData
通过formData对象可以组装一组用XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果把表单的编码类型设置为multipart/form-d ...