Question

我是新手，将UI Design集成到应用程序中。我有一个jsp页面，下面给出了一些代码：

`

<!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，但背景图像没有正确显示，也没有显示徽标。

请有人帮我解决这个问题吗？提前谢谢。

Answer 1

您的信息页位于 /FTL/evosnapRedirectController/success/1485323783355。内联css中的相对网址resources/img/xyymm/home.jpg解析为/FTL/evosnapRedirectController/success/resources/img/xyymm/home.jpg，但似乎该资源实际上位于/FTL/resources/img/xyymm/home.jpg

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

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

或

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

Answer 2

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

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

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

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

2 个答案: