靜態圖像文件不在jsp頁面中加載，而外部css在chrome中不工作

我正在使用spring mvc和bootstrap。這裏是我的項目結構：靜態圖像文件不在jsp頁面中加載，而外部css在chrome中不工作

我的彈簧調度員的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>

的圖像沒有按」當我在瀏覽器中打開頁面時，t會被加載。 Google Chrome在控制檯中顯示錯誤，但Edge和Firefox不顯示任何錯誤。此外，「上傳配置文件圖片」按鈕從Edge和Firefox中的ButtonsClass.css文件中獲取其css類（MediumGreenButton），但在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）

來源

2017-04-18 Preetom Saha Arko

嘗試這樣的方式，

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

來源

2017-04-18 17:16:37 Kushan

感謝。它像魔術一樣工作。但爲什麼不是我的外部CSS在谷歌瀏覽器上工作？ –

刪除您的Chrome瀏覽器緩存並重試。 – Kushan

靜態圖像文件不在jsp頁面中加載，而外部css在chrome中不工作

回答

相關問題