我正在使用 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>
当我在浏览器中打开页面时，图像没有加载。 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)
最佳答案
这样试试，
<img src="<c:url value="/resources/images/userAvatar.jpg" />" />
关于html - 静态图像文件未在 jsp 页面中加载，外部 css 在 chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43478274/