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

【问题标题】：Use CSS referenced images in JSP pages在 JSP 页面中使用 CSS 引用的图像
【发布时间】：2010-06-16 09:23:47
【问题描述】：

我正在编写一个 java servlet（struts/JSP 等）。我正在尝试在 JSP 页面中使用 CSS 设置进度条的样式，但在使用 chrome 的开发人员工具时出现此错误：

资源解释为图像，但使用 MIME 类型 text/plain 传输。

在 CSS 文件中：

背景：url(../images/bg_bar.gif) 不重复 0 0;

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

【问题讨论】：

标签： css jsp

【解决方案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。

你有 2 个选项来解决它：

使用简单的<style type="text/css" src="include/css/default.css"/> 代替@include。这将使它在路径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 中寻找图片。
保留所有内容，但将 css 文件中的路径更改为“include/images/bg_bar.gif”。然而，这个解决方案比第一个更糟糕，因为在 html 文件中包含 css 很糟糕。

【讨论】：

【解决方案2】：

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

如果您遇到错误 - 那么您的问题是公众无法访问您的图片。

【讨论】：

好的，尝试检查 chrome 是否从您手动执行的同一路径加载图像。如果它使用相同的路径 - 尝试检查手动加载图像时出现的响应标头，检查“内容类型”部分。
好的，chrome 正在看这里：localhost:8080/images/bg_bar.gif 我从这里加载了它localhost:8080/GraphBuilder/include/images/bg_bar.gif
它错过了上下文和包含图像的文件夹。这是否意味着我将包含文件夹放在了我的项目中的错误位置？
添加了正确答案的新评论。