Use CSS referenced images in JSP pages_问答_开发者

开发者 https://www.devze.com 2023-01-03 10:26 出处：网络

I am writing a java servlet (struts/JSP etc). I am trying to style a progress bar using CSS in a JSP page but get this error when using chrome\'s developer tools:

相关专题：css

I am writing a java servlet (struts/JSP etc). I am trying to style a progress bar using CSS in a JSP page but get this error when using chrome's developer tools:

Resource interpreted as image but transferred with MIME type text/plain.

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

And in the CSS file:

background:url(../images/bg_bar.gif) no-repeat 0 0;

Could anyone explain why this is and show how I can 开发者_StackOverflowuse this CSS in my page?

Ahh... I got where is your problem. You are including the css with @include, so it inserts the whole css file into your html code.

The result will look like this:

localhost:8080/GraphBuilder/yourpage.htm

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

Now, looking at the address of the page, where do you think will it try to find the image? Exactly, in localhost:8080/GraphBuilder/../images/bg_bar.gif -> localhost:8080/images/bg_bar.gif.

You have 2 options to solve it:

Instead of @include, use simple <style type="text/css" src="include/css/default.css"/>. This will make it look for css in the path localhost:8080/GraphBuilder/include/css/default.css. And css will look for image in localhost:8080/GraphBuilder/include/css/../images/bg_bar.gif -> localhost:8080/GraphBuilder/include/css/images/bg_bar.gif.
Leave everything as it is, but change the path in css file to 'include/images/bg_bar.gif'. However this solution is worse than the first one, as including css in html file sucks.

My guess is that you get an error page instead of the image. Try typing full path to the image in your browser and see if it works. That is: http://domain/app/include/images/bg_bar.gif

If you get an error - then your problem is that your images are not accessible to the public.