I work with a Java/Spring project and the project structure is provided below,
I need to reference the app.css in the index.jsp file. Currently, I reference the following way in the index.jsp and the app doesn't get the CSS information's.
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Bitcoin Wallet</title>
<link href="${pageContext.request.contextPath}/resources/css/app.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
</html>
In the dispatcher-servlet.xml, I provided the resources path as below,
The page I get in the localhost clearly doesn't have the css. How to solve the issue?
To use resources in spring mvc project you have to declare mvc:resources, to map url to a physical file path location.
<mvc:resources mapping="/resources/**" location="/resources/css/"
When you use /resources/ in jsp file spring will map this url to /resources/css/.
Next you can reference css file in jsp file:
<link href="<c:url value="/resources/css/app.css" />" rel="stylesheet">
And move resources folder into webapp folder as
Related
I am doing a project in Java using Spring Boot in the intellij idea under the management of Maven, and I occasionally have a problem with connecting bootstrap.min.css on the HTML page.
In my case, this problem arises spontaneously, and I could not determine its cause. Even now I have several absolutely identical projects, and in some of them this problem exists, and in others it has disappeared.
I connect bootstrap.min.css in the same way as on this page https://getbootstrap.com/docs/4.3/getting-started/introduction/
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>LoginPage2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
when I go to the page in the browser, an error message is displayed in the console:
Refused to apply style from 'http://localhost:8081/static/css/bootstrap.min.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled
in my case it helped me:
replacing this code
<link rel="stylesheet" href="/static/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
with this one
<link rel="stylesheet" href="/static/css/bootstrap.css">
remove all comments from files bootstrap.min.css and bootstrap.css
just in case, explicitly register the path to resources in the project with spring boot, for example:
#Configuration
public class StaticResourceConfig implements WebMvcConfigurer {
private static final String[] CLASS_PATH = {"classpath:/"};
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**").addResourceLocations(CLASS_PATH);
}
}
If there is a spring security, then make sure that there is permission to the resources.
If you are using local downloaded bootstrap in your PC then, remove integrity and crossorigin from your link. I think this is work for you.
You can try this.
Add in your link tag two more attribute
type="text/css" media="all"
<link rel="stylesheet" href="/static/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" type="text/css" media="all">
This question already has answers here:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
(9 answers)
Closed 6 years ago.
I'm having trouble accessing some images and a css file from my JSP stored in WEB-INF. My servlet calls up the JSP and that all loads fine but the page is unable to find the images and css file. I'm very new to this sort of thing and would appreciate the help. I am aware that there have been some questions on this in the past and I've tried the suggestions posed by those but I can't seem to get my head around it. Here's the contents of the JSP (I tried a bunch of different methods):
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="resources/grid.css">
</head>
<body>
<!-- Main container -->
<div class="container_12"></div>
<!-- Foreground container -->
<div class="grid_10 prefix_1 suffix_1">
<img src = "/resources/images/Foreground.png">
</div>
<!-- Header container -->
<div class = "grid 8 prefix_2 suffix_2">
<img src = "${pagecontext.request.contextPath}/resources/images/Header.png">
<p>Test</p>
</div>
<div class = "clear"></div>
<!-- Navigation bar container -->
<div class = "grid 8 prefix_2 suffix_2">
<img src = "${pagecontext.request.contextPath}/resources/images/Navbar.png">
</div>
</body>
</html>
And here's my directory structure:
http://gyazo.com/0a7aea0a44e51e1789c263767e14a40b
You can use the below to find the real path of an image.
<!-- Header container -->
<div class = "grid 8 prefix_2 suffix_2">
<img src = "<%= application.getRealPath("/resources/images/Header.png") %>">
<p>Test</p>
</div>
Put all the files or css-images outside the WEB-INF folder. It is good practice that in WEB-INF you put only classes and web.xml.
I am facing problem while linking the css file in jsp page.
My eclipse folder structure is
--SampleProject
--WebContent
--META-INF
--resource
--css
style.css
--images
(style sheet images are present here)
--js
--WEB-INF
a.jsp
b.jsp
I want to link the css from this path resource/css/style.css in a.jsp page.
I tried all the below combinations. but no use.
<link href="${pageContext.request.contextPath}/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="../../css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="WebContent/resource/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link href="resource/css/styles.css" rel="stylesheet" type="text/css" media="screen" />
and in style sheet i am linking the images by using
body {
background: #c9ebff url(resource/images/left_panel.jpg) top repeat-x;
}
please help to resolve this issue.
Thanks in advance.
Try to use
body { background: #c9ebff url(../images/left_panel.jpg) top repeat-x; }
or
body { background: url(../images/left_panel.jpg); } // if linking, then add other attributes
When facing these type of issues i.e files not linking .... try to use
FIREBUG for tracing out the browser/linking errors ... FireBug very
useful debugging tool.
Use backslash (\) instead of forward slash in path (/).
Example:
<link href="..\css\styles.css" rel="stylesheet" type="text/css" media="screen" />
Internet Explorer doesn't support HTML <base> tag and even other browsers do, there are some problems when redirect takes place inservletsto some.jsppages for examplerequest dispatching.`
It's feasible to add ${pageContext.request.contextPath} with each URL
nor request.getServletPath()
JSP relative links for CSS and images with servlets forwarding may change things a lot. This link : Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is there a better approach with JSP / servlets or it's just an IE issue?
Link : HTML <base> TAG and local folder path with Internet Explorer
And if it is an IE issue:
1. how to fix the IE issue as the above post is unable to give a valid answer?
2. how to solve it with JSP / servlets?
My website is now showing CSS and images.
E.g. HTML output is:
<base href="http://localhost:8080/Alpinema/" /> is not working for
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
It works in other browsers like Firefox and Chrome.
My JSP code portion:
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<meta charset="utf-8">
<title>Alpinema.com</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
/css?family=Merriweather|PT+Sans:700|Nobile:400italic' rel='stylesheet' type='text/css'>
</head>
Use <c:url> tag from JSTL to reference CSS/JavaScript resources inside my JSP files. By doing so you can be sure that the CSS/JavaScript resources are referenced always relative to the application context (context path).
Example
index.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />
<script type="text/javascript" src="<c:url value="/js/utils.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-1.8.3.js" />"></script>
</head>
<body>
...
</body>
</html>
For even more solutions see my answer here:
Adding external resources (CSS/JavaScript/images etc) in JSP.
i am trying to run a jQuery on tomcat server and weblogic server but its not working
<html>
<head>
<script src="/WEB-INF/js/jquery-1.7.1.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<link href="/WEB-INF/css/styles.css" type="text/css" rel="Stylesheet" />
<title>Dual List Box</title>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
can any one help me ..!!
If you're deploying a war file, the contents of the WEB-INF directory won't be accessible to the public via http. Ensure your js and css directories are in the root of the war (on the same level as WEB-INF) then change your path in the html to /css/styles.css and /js/jquery-1.7.1.js in your style and script tags.