Question

我正在使用spring mvc和bootstrap。这是我的项目结构：

我的spring-dispatcher-servlet文件：

<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>

我遇到问题的jsp文件：

<%@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>

当我在浏览器中打开页面时，图像无法加载。谷歌浏览器在控制台中显示错误，但Edge和Firefox没有显示任何错误。此外，＆＃34;上传个人资料图片＆＃34;按钮从Edge和Firefox中的MediumGreenButton文件获取其css类（ButtonsClass.css），但在Chrome中，它没有获得任何CSS样式（令人惊讶的是，甚至没有显示除非我给它一个id并在同一个jsp文件中为那个id定义css。

我尝试在标题中放置js脚本文件链接，但它没有解决任何问题。

注意：我已在项目的lib文件夹中添加了jstl-1.2 jar。图像的大小为1.73kB（图像的链接：https://learnbox.in/wp-content/uploads/Default-user-avatar-LearnBox.jpg）

Answer 1

尝试这样，

 <img src="<c:url value="/resources/images/userAvatar.jpg" />" />

静态图像文件未在jsp页面中加载，外部css在chrome

1 个答案: