无法链接 CSS 和图像

Posted

技术标签:

【中文标题】无法链接 CSS 和图像【英文标题】:Not able to link CSS and images 【发布时间】:2012-10-24 15:47:35 【问题描述】:

我正在开发一个 Spring、Hibernate、JSP 应用程序。我正在尝试从我的 JSP 页面显示图像。图像未显示在浏览器上。我也无法将我的 CSS 链接到 JSP 页面。

我的 JSP 页面是:

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="page1">
<div class="headerlogo" align="center"><a href=""><img src="images/Logo1.png"  /></a></div>
<div align="center">
    <h1><spring:message code="header.title"/></h1>
    Language :
    <a href="?lang=en_US">English</a>|
    <a href="?lang=sp_SP">Spanish</a>

    <h3>
        <a href="home"><spring:message code="header.gotohome" /> </a>
    </h3>
</div>
</body>
</html>

我已经设置了

<http pattern="/images/**" security="none" />
<http pattern="/css/**" security="none" />

用于我的图片和 CSS 文件夹

我的 Spring Security xml 是:

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/security"
    xmlns:beans="http://www.springframework.org/schema/beans" 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-3.1.xsd
http://www.springframework.org/schema/security
http://www.springframework.org/schema/security/spring-security-3.1.xsd">


    <http pattern="/images/**" security="none" />
    <http pattern="/css/**" security="none" />

    <http auto-config="true" use-expressions="true">

        <intercept-url pattern="/admin*" access="hasRole('SYS_ADMIN')" />

        <form-login login-page="/login" default-target-url="/role-check"
            authentication-failure-url="/login?error=true" />
        <logout logout-success-url="/login" />

         </http> 

         <authentication-manager> 
        <authentication-provider> 

        <jdbc-user-service data-source-ref="fmsDataSource"  
        users-by-username-query="select USERNAME,PASSWORD, 'true' as enabled from users where USERNAME=?"
        authorities-by-username-query="select u.USERNAME, ur.AUTHORITY from users u, user_roles ur where u.USER_ID = ur.USER_ID and u.USERNAME =? " />
    </authentication-provider>
    </authentication-manager>
</beans:beans>

【问题讨论】:

你确认它在没有 Spring Security 的情况下也能工作吗?请扩展您的问题以包括当您尝试直接在浏览器中访问 c​​ss 文件时会发生什么,并发布请求的调试日志输出。 @LukeTaylor - 如果没有弹簧安全,我没有检查它。浏览器控制台出现以下错误 GET localhost:8080/demo/css/style.css 404 (Not Found) 和 GET localhost:8080/demo/images/Logo1.png 404 (Not Found) 如果你得到 404s 那么这是你的应用程序的一个基本问题,你应该首先确保它在没有 Spring Security 的情况下工作。查看 Spring Security 教程示例(或任何其他可用的 JSP 应用程序)以了解如何在 JSP 中嵌入 URL。 @Raman 对答案不满意,请采纳。 【参考方案1】:

我已经通过在web.xml 文件中添加以下映射解决了这个问题

<servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.css</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.js</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.gif</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.jpg</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.png</url-pattern>
    </servlet-mapping>

并且还通过在图像 src url 中添加 &lt;%=request.getContextPath()%&gt;。 赞&lt;img src="&lt;%=request.getContextPath()%&gt;/images/logo.png" /&gt;

【讨论】:

如果可以用标签替换,不推荐使用小脚本。没有描述为什么这个映射以及需要什么映射。【参考方案2】:

您可以使用 JSTL &lt;link href="&lt;c:url value='/css/style.css'/&gt;" 标记,这与图像相同。 &lt;img src="&lt;c:url value='/images/Logo1.png'/&gt;".

你还需要添加到页面

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

【讨论】:

应该使用哪个 jstl jar? 我在依赖中使用了 javax.servletjstl1.2。还有什么要补充的吗? 添加 taglibsstandard1.1.2compile

以上是关于无法链接 CSS 和图像的主要内容,如果未能解决你的问题,请参考以下文章

悬停时将链接图像向上移动 5px

URL 重写后缺少 CSS 文件和图像

css 从图像中删除链接(翻转)和标题

CSS 打印预览 - 显示图像/链接 URL

PHP WordPress使用固定链接和CSS拉出特色图像

将 CSS 和图像链接到 Spring MVC maven 项目