CODEWITHSUNDEEP
htmlcssspring-mvcwar
We are Borg
We are Borg

Reputation: 5313

War file will not show images/CSS/JS/HTML

I am working on a spring-MVC project. Right now I have a user.jsp file which is responsible for adding users in the database. I have created a few images, js, css to go with it. As you can guess, the HTML code is within the .jsp code. Once I land on the page, I can see all my HTML code working, but no CSS, no images. I have checked, and all images,etc are in my war file too. In the IDE, when I click on any CSS or any JS file, it takes me there. I am presuming, it means that it is able to find the link with the absolute path I provided. Then why am I unable to see that when I run the application? Structure is as follows:

webapp/
|--+views/
         css/
         fonts/
         img/
    |+-user.jsp

Also, When i open the war file with archive manager and all the folders outside the project, then all the files are parsed.

JSP code:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<html>

<head>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>Ecommerce</title>

    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,700,900,700italic,500italic' rel='stylesheet' type='text/css'>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/perfect-scrollbar.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="stylesheet" href="css/chosen.css">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <link rel="stylesheet" href="css/ie.css">
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/fontello-ie7.css">
    <![endif]-->

</head>


<body>

<!-- Container -->
<div class="container">

<!-- Header -->
<header class="row">

<div class="col-lg-12 col-md-12 col-sm-12">

<!-- Top Header -->
<div id="top-header">

    <div class="row">

        <nav id="top-navigation" class="col-lg-7 col-md-7 col-sm-7">
            <ul class="pull-left">
                <li><a href="create_an_account.html">My Account</a></li>
                <li><a href="orders_list.html">List Order</a></li>
                <li><a href="order_info.html">Checkout</a></li>
                <li><a href="text_page.html">About Us</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>

Thats just a little bit of JSP code to get idea.

Upvotes: 0

Views: 1065

Answers (1)

seenukarthi
seenukarthi

Reputation: 8624

You are having relative path for your css this will only work for one purticular path, in your case it will work only if the URL of the page is <context>/views/user.jsp.

To solve this you have to append the context root like in the below example.

<link rel="stylesheet" href="${pageContext.request.contextPath}/view/css/bootstrap.min.css">

Upvotes: 2

Related Questions