在JSP页面中使用CSS引用的图像

Question

我正在编写一个java servlet (struts/JSP等)。我试图在JSP页面中使用CSS设置进度条的样式，但在使用chrome的开发人员工具时遇到以下错误：

解释为图像但使用MIME类型文本/普通文本传输的资源。

<%@ include file="../include/css/default.css“%>

在CSS文件中：

背景:url(../images/bg_bar.gif) no-repeat 0 0；

谁能解释一下为什么会这样，并说明我如何在我的页面中使用这个CSS？

Answer 1

啊..。我知道你的问题出在哪了。您使用@include包含css，因此它会将整个css文件插入到您的html代码中。

结果将如下所示：

localhost:8080/GraphBuilder/yourpage.htm

<html>
...
<style>
.myId {
background:url(../images/bg_bar.gif) no-repeat 0 0;
}
</style>
...

现在，看看页面的地址，你认为它会尝试在哪里找到图像？没错，在localhost:8080/GraphBuilder/../images/bg_bar.gif -> localhost:8080/images/bg_bar.gif中。

你有两个选择来解决这个问题：

使用

1. 代替@include，使用简单的<style type="text/css" src="include/css/default.css"/>。这将使它在路径localhost:8080/GraphBuilder/include/css/default.css中查找css。css会按原样在localhost:8080/GraphBuilder/include/css/../images/bg_bar.gif -> localhost:8080/GraphBuilder/include/css/images/bg_bar.gif.
2. Leave中查找图像，但将css文件中的路径改为‘localhost:8080/GraphBuilder/include/css/../images/bg_bar.gif/->/bg_bar.gif’。然而，这个解决方案比第一个解决方案更糟糕，因为在html文件中包含css很糟糕。

Answer 2

我猜你会得到一个错误页面，而不是图片。尝试在浏览器中键入图像的完整路径，看看是否有效。即：http://domain/app/include/images/bg_bar.gif

如果你得到一个错误-那么你的问题是你的图像是不能被公众访问的。