背景图像和徽标图像不显示在jsp页面中？答案

【问题标题】：Background Image and Logo Image is not displayed in jsp page?背景图像和徽标图像不显示在jsp页面中？
【发布时间】：2017-01-25 06:50:35
【问题描述】：

我是在应用程序中集成 UI 设计的新手。我有一个jsp页面，下面给出了whick代码：

<!DOCTYPE html>
<%@page import="java.util.Enumeration"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>

<html lang="en">
<head>
<jsp:directive.include file="include_metatags.jsp" />
<title><s:message code="form.home.testEvosnapResponse" arguments="${applicationScope['APPLICATION_HEADER_TEXT']}"/></title>
<jsp:directive.include file="include_head.jsp" />

<link href="${pageContext.request.contextPath}/resources/css/datatables.min.css" rel="stylesheet">
<style>
        body,html{
                    background-image      : url("resources/img/xyymm/home.jpg");
                    background-attachment : fixed;
                    background-position   : center center;
                    background-size       : cover;  
                }
    </style>
</head>
<body>

    <jsp:include page="menu.jsp">
        <jsp:param value="xylyx" name="currentpage" />
    </jsp:include>

    <div class="container amo2">
        <div class="card card-container2"
            style="padding: 20px 40px 90px 40px;">
            <img id="profile-img" class="profile-img-card" src="resources/img/xyymm/fintech_img.png">  

            <h4 style="margin-bottom: 20px;">Evosnap Response Page</h4>

            <div class="container-fluid mer table-responsive" id="wht">

                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/home">Home</a></li>
                    <li><a href="${pageContext.request.contextPath}/evosnapTest">Evosnap Test</a></li>
                    <li>Evosnap Response Page</li>
                </ol>

                <div class="body-content" style="padding-left: 15px;">

                    <p>${message}</p>
                    Transaction Details
                    <table style="width: 60%">
                        <tr>
                            <td><s:message code="form.transactionlist.transactionId" /></td>
                            <td>${transaction.transactionId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.merchantId" /></td>
                            <td>${transaction.merchantId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.customerId" /></td>
                            <td>${transaction.customerId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.name" /></td>
                            <td>${transaction.lastName},${transaction.firstName}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.invoiceNumber" /></td>
                            <td>${transaction.invoiceNum}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.amount" /></td>
                            <td>${transaction.amount}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.ipAddress" /></td>
                            <td>${transaction.ipAddress}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.currency" /></td>
                            <td>${transaction.currency}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.orderStatus" /></td>
                            <td>${transaction.orderStatus}</td>
                        </tr>
                    </table>

                </div>

            </div>
            <!-- /card-container -->
        </div>
    </div>

    <jsp:directive.include file="include_body_scripts.jsp" />
</body>
</html>

下面是我运行这个jsp文件时的截图：

我想要在这里添加为内联 css 的背景图片，但背景图片没有正确显示，也没有显示徽标。

请任何人都可以帮助我得到这个？提前致谢。

【问题讨论】：

可能路径不对，换个url路径试试。 url("../resources/img/xyymm/home.jpg");或 url("./resources/img/xyymm/home.jpg");根据你的路径。
感谢您的宝贵时间，但我尝试了此解决方案，但对我没有帮助。

标签： javascript java css image jsp

【解决方案1】：

您的页面位于 /FTL/evosnapRedirectController/success/1485323783355。内联css中的相对URLresources/img/xyymm/home.jpg解析为/FTL/evosnapRedirectController/success/resources/img/xyymm/home.jpg，但貌似资源其实在/FTL/resources/img/xyymm/home.jpg

您需要在后台 URL 中包含上下文路径：

background-image      : url("<c:url value='/resources/img/xyymm/home.jpg'/>");

或

background-image      : url("${pageContext.request.contextPath}/resources/img/xyymm/home.jpg");

【讨论】：

【解决方案2】：

我刚才遇到了同样的问题，这里是我如何解决的：

.cssProperties {
  background: url("${pageContext.request.contextPath}/../../../assets/images/background.png"); 
}

我一直在使用您在此处看到的模式 [/../../../]，直到匹配正确的目录路径流。
我使用了 MDN 参考，通过利用 VSC IDE 智能感知命令“将鼠标悬停在正在创建的 URL() 链接上即可查看，并通过 Ctrl 单击链接检查其目的地”以获得更引人注目的效果，保证结果可解决此问题。

【讨论】：