JSP中引入CSS后,关于CSS中图片路径的问题

JSP中引入CSS后,关于CSS中图片路径的问题

我有一个JSP文件如下:

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" errorPage="" %>



.content { height:500px; /* 使用相对路径,直接访问JSP没问题,通过Servlet的forward有问题 */ /*background:url(resources/images/homeModel.gif);*/ /* 使用绝对路径后,Servlet的forward也无问题 */ background:url(<%=request.getContextPath()%>/resources/images/homeModel.gif); }



文件中通过link引入了一个外部的CSS文件。
如果我直接访问JSP的话,这个文件中的 background:url(../resources/images/model1.jpg); 属性没问题;
但是我通过Servlet的forward转发后,环境的上下文就发生了改变,像这样使用相对路径就无法访问到图片,虽然可以改用绝对路径解决。
但是,这样做就把整个路径写死了,由于项目名称http://ip:port/project 有可能发生改变,所以不希望使用写死的绝对路径。

如果这个css样式在jsp文件中,还好说,直接通过request.getContextPath()方法就可以等到上下文。但是外部的CSS文件无法使用这种方式。

我又不可能把所有的css都写在jsp页面中,对于JSP中引入外部CSS或者JS文件的情况,如何解决文件路径的问题的?

所以,想求一个方案,如何来实现这种css文件中的路径问题?

不知道大家在遇到这种问题的时候一般都是采取的什么方案?

我的web目录结构是:
http://localhost:8080/project/
/project 是项目的根目录,也就是request.getContextPath()得到的内容
下面是项目整体的目录结构:
project

  • css home.css
  • js home.js
  • resources
    • images
    • 所有图片都存放在此
    • css
    • js

2个回答

有两种做法,你可以选择

第一种:
把css内容弄进某个css文件中去,比如style.css之类的。按照规范,css文件中的路径以该文件为基准,如果css文件和图片都是静态资源,一开始规划好就OK了。

第二种:
用绝对路径。你的代码中有,但是稍稍有错误的样子。

[code="html"]
background:url(<%=request.getContextPath()%>/resources/images/homeModel.gif); [/code]

改成

[code="html"]
background:url(/<%=request.getContextPath()%>/resources/images/homeModel.gif); [/code]

就是少了个‘/’在路径的最前面。

kamarl0
kamarl0 也没有找到合适的解决方案,就给你了。
7 年多之前 回复
j_clxy
clxy大叔 我自己用过的一个办法,只是想来效率会低些。 - css文件的扩展名改成jsp 比如 style.css 改成 style.jsp 文件第一行追加类似 <%@page pageEncoding="UTF-8" contentType="text/css;"%> 这样,定下编码。 - 在JSP文件中引用的地方也改成相应的文件名。 <link rel="stylesheet" href="/xxx/style.jsp" type="text/css" media="all" /> 这样你就可以在css文件里写java的代码了。 我有时候也这么处理Javascript。
7 年多之前 回复
kamarl0
kamarl0 request.getContextPath()方法返回的就是带有"/"的(例如/project)。 使用绝对路径如果在单独的CSS文件中只能写死,style.css文件中不可能使用<%=request.getContextPath()%>JAVA代码呀。 background:url(/project/resources/images/homeModel.gif); 下面这种情况只适用于JSP文件中包含CSS的情况: background:url(<%=request.getContextPath()%>/resources/images/homeModel.gif);
7 年多之前 回复

我不明白,为什么在project的根目录下有一套 css和js,在resources 下面又有一套。

kamarl0
kamarl0 resources下面一般用来放公用的,而project下放的是每一个JSP使用的CSS或者JS。
7 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!