Having trouble uploading images and css files to a JSP page in a Spring MVC project

The directory structure appears as follows -

projectroot -- src --> main-->java-->com-->controllers etc
            -- src --> resources--> myresources --> css-->.css
            -- src --> resources--> myresources --> images-->.jpg etc
            -- src --> webapp --> mvc-dispatcher-servlet.xml
            -- src --> webapp --> pages --> .jsp pages

The top of the page includes -

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>

In the head section of the page, I am using the following -

<link
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"
    rel="stylesheet">
<link
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
    rel="stylesheet">
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet">

Images are referenced like this -

<img    src="/resources/images/logo2.png" height=20;></a>

The mvc-dispatcher-servlet contains -

<bean
        class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/WEB-INF/pages/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>

    <mvc:resources mapping="/resources/**" location="/resources/myresources/" />
    <mvc:annotation-driven />

Although there are no console errors, the page does not display correctly. Can anyone provide suggestions on why the images and CSS files are not loading properly? Could it be an issue with the resource mapping in mvc-dispatcher or perhaps a problem with the project directory structure? Thank you for any assistance with this matter.

Answer №1

To organize your project structure, consider moving the resources folder to the webapp directory as shown below:

projectroot -- src --> main-->java-->com-->controllers etc
            -- src --> webapp --> mvc-dispatcher-servlet.xml
            -- src --> webapp --> pages --> .jsp pages
            -- src --> webapp --> resources--> myresources --> css-->.css
            -- src --> webapp --> resources--> myresources --> images-->.jpg etc

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble getting overflow:auto to work with CSS3 transformed child elements? Looking for a recommended workaround?

Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "overflow: auto;". <style type="text/css"> ...

The height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

Resolving the transition effect problem in Tailwind CSS and Alpine JS

I have successfully implemented a basic button and modal combination using Tailwind and Alpine - check out the demo here: https://jsfiddle.net/0pso5cxh/ However, I am facing an issue with the leave transition. When the cancel button or close icon is click ...

Is it possible to apply a gradient to a table row in Internet Explorer?

Whenever I hover over a specific table row in my table, I want the background to transition to a linear gradient. The CSS code is pretty simple: tbody.row-links tr:hover { background: ...standard multi-browser linear gradient code... color: #333C3 ...

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

Move your cursor over an image to reveal another image on top without impacting the image underneath by using background-image

Is there a way to create an effect where hovering over a specific book image will display a checkmark, indicating selection upon click? Ideally, users should be able to press alt (cmd on mac) to select multiple books simultaneously. Check out the HTML bel ...

How can the Bootstrap Jumbotron element be adjusted to perfectly fill the width of the screen?

Currently, I'm utilizing a jumbotron element on my website and aiming to make it fluid in order to adapt and fit the entire jumbotron to the screen width. However, I seem to be facing difficulty when attempting to increase its width. Below is the cod ...

SVG not displaying correctly in Firefox

For some reason, my CSS-animated SVG is not showing up in Mozilla Firefox 58, although it works fine in Chrome. https://i.sstatic.net/rFD8z.png If you want to take a look at the code, here is the link to the Codepen page: https://codepen.io/ninivert/pen/ ...

Rotate the image as you hover your cursor over it

I am trying to implement a script where the image is rotated when the user hovers over it. Unfortunately, the hovering effect is not functioning as expected. $("#alcazar-image").rotate({ bind: { mouseover : function() { $(this).rotate({anima ...

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

Is there a way to eliminate the bottom padding in a textarea field?

Need help removing the bottom padding in a textarea? Check out this code snippet: $('textarea').css("height", $("textarea").prop("scrollHeight")) textarea { width: 300px; resize: none; margin: 0; padding: 0; } <script src="https://a ...

Having trouble with the JQuery click function not responding as expected

I want to create a button that, once clicked in the center, will cause all elements within a div to slide upwards. $(document).ready(function() { $("#imgs").click(function() { $("#start").animate({ bottom: "+=250px" }, "slow"); }); }); ...

Challenges with altering the height of a div through animation

HTML <div class="blok1" ></div> <div class="blok2"></div> <div class="blok3"></div> CSS .blok1 { background-color: green; border-bottom-left-radius:15px; border-bottom-right-radius:15px; h ...

Angularjs - Enhancing User Experience with Drag and Drop Column Functionality in Angularjs

I am attempting to drag and drop a table column using AngularJS. I have tried using smart-table and ui-sortable, but I am unable to find a solution for implementation. If anyone has a simple example or reference, please provide guidance. ...

Preventing the flipping effect with jquery flippy

Hey there! I've been using a cool flippy jquery plugin that I found on this website. It's working great, but I have run into an issue. When the element flips, I want to include a button on the flip side that takes the user to a different page. T ...

Tips for concealing a button post-click

Just updated my code, please take a look! I have created a button using HTML, CSS, and JavaScript and I am trying to figure out how to hide it once it's clicked. Below is the HTML for the button that should play music when clicked: <audio id="my ...

"Applying CSS to Fill the Remaining Portion of the Webpage with a Dark

Trying to maintain sharpness and focus on a background image in my webpage, but struggling with consistent sizing. The challenge lies in keeping the image at a fixed size while filling in any additional space with black to accommodate different screen siz ...

Disallowing the vertical resizing of a window beyond a specific point

I'm using bootstrap to build my website. One thing I'd like to achieve is preventing the window from resizing beyond a certain point downwards. Currently, here's what I have: html, body{ min-width: 300px; max-width: 3000px; min-height: ...

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...