I am working with spring mvc and bootstrap. Here is my project structure:
My spring-dispatcher-servlet file:
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="hellocontroller" />
<bean id="viewResolver"
class = "org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name = "prefix">
<value>/WEB-INF/</value>
</property>
<property name = "suffix">
<value>.jsp</value>
</property>
</bean>
<mvc:resources mapping="/resources/**" location="/resources/" />
<mvc:annotation-driven />
</beans>
The jsp file where I am having problems:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ 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>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="<c:url value="/resources/css/ButtonsClass.css" />" rel="stylesheet">
<style>
#Go {
background-color: #0099FF;
color: #FFFFFF;
border-radius: 10px;
width: 70px;
height: 30px;
}
input[type="radio"]{
margin: 0px 20px;
}
#ProfilePicButton {
background-color: #18E154;
color: #FFFFFF;
border-radius: 10px;
width: 180px;
height: 30px;
}
</style>
</head>
<body>
<br/> <br/> <br/> <br/> <br/>
<div class="container">
<!-- col means column, md >=992px (Also use xs, sm and lg), and the 3 represents the size of the column
3 * 4 = 12 (A 6 column layout would use 2 if they had equal size) -->
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<!-- something -->
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<!-- Profile picture here -->
<img src="/resources/images/userAvatar.jpg" />
<br/>
<button class="MediumGreenButton">
Upload profile picture
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
The image doesn't gets loaded when I open the page in a browser. Google Chrome shows error in console, but Edge and Firefox doesn't show any error. Moreover, the "Upload Profile Picture" button gets its css class (MediumGreenButton) from the ButtonsClass.css file in Edge and Firefox, but in Chrome, it doesn't get any css styling (and surprisingly, doesn't even show any error on console) unless I give it an id and define the css for that id in the same jsp file.
I have tried placing the js script file links in the header, but it didn't solve anything.
Note: I have added jstl-1.2 jar in my project's lib folder. The size of the image is 1.73kB (link of the image: https://learnbox.in/wp-content/uploads/Default-user-avatar-LearnBox.jpg)
