如何在servlet中显示背景图像[重复]答案

【问题标题】：How to display background image in servlet [duplicate]如何在servlet中显示背景图像[重复]
【发布时间】：2016-05-25 06:48:42
【问题描述】：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>ServletApplication</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>DemoServlet</display-name>
    <servlet-name>DemoServlet</servlet-name>
    <servlet-class>com.mayu.servlet.DemoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>DemoServlet</servlet-name>
    <url-pattern>/DemoServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>Login</display-name>
    <servlet-name>Login</servlet-name>
    <servlet-class>com.mayu.servlet.Login</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Login</servlet-name>
    <url-pattern>/Login</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>RoomMaster</display-name>
    <servlet-name>RoomMaster</servlet-name>
    <servlet-class>com.mayu.servlet.RoomMaster</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RoomMaster</servlet-name>
    <url-pattern>/RoomMaster</url-pattern>
  </servlet-mapping>
</web-app>

上面你看到了我的 Web-xml

这是我需要的输出，但是当与 servlet 集成时，我只能登录没有 image

 .hr {
            background: url("../img/login.jpg");
        }

<html>
<head>
    <title>Reservation</title>
    <!-- Include CSS File Here -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/Site.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- Include JS File Here -->
    <!--<script src="js/login.js"></script>-->
    <script src="js/jquery-1.9.0.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    
</head>
<body class="hr">
    <form id="myform" method="post" action="RoomType.html" name="myform">
        <div class="row">
            <div class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-2">
                <div class="jumbotron">
                    <form class="form-horizontal" style="margin-top:50px; margin-bottom:50px;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col md-2 col-sm-2 col-md-offset-2 control-label" style="padding:0px;">User Id</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="username" id="username" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-md-2 col-sm-2 col-md-offset-2 control-label" style="padding:0px;">Password</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="password" name="password" id="password" />

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-3">
                                <!--<input type="button" value="Login" id="submit" onclick="myFunction()"/>-->
                                <input type="button" onclick="myFunction()" value="Login">
                            </div>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </form>
    <script>
        function myFunction() {
            document.getElementById("myform").submit();
        }

        $(document).ready(function () {
            $('.combobox').combobox();
            //$('.combobox').combobox({newOptionsAllowed: false});
            $('form').submit(function (e) {
                e.preventDefault();
                alert($('input[name="normal"]').val());
                alert($('input[name="horizontal"]').val());
                alert($('input[name="inline"]').val());
            });
        })

        //document.getElementById("TextBox1").value = Date()
    </script>
</body>
</html>

我正在做一个基于servlet 的网络基础项目，因为我创建了servlet page 并将我的css,js,img folder 添加到WebContent folder。我的问题是我将image 设置为在浏览器上看不到图像的正文背景。我添加了我的登录页面代码，请查看并帮助我解决这个问题。

【问题讨论】：

到目前为止你尝试过什么？检索您上面显示的页面的 URL 是什么？单独检索“login.jpg”图像的 URL 是什么？
查看直到我有一个带有背景图像的登录页面，html 代码在没有 servlet 的情况下运行正常，但是当在 servlet 中添加该 html 代码时，背景图像不工作，其他所有工作都在我的验证中， css 只工作背景图片不工作
请分享您的 web.xml 内容
不知道是否相关，但您有嵌套表单。这是违法的
您在浏览器的控制台中看到资源未找到错误吗？！

标签： image servlets resources relative-path

【解决方案1】：

尝试进行以下更改：

.hr {
        background-image: url("/img/login.jpg");
    }

【讨论】：

【解决方案2】：

您使用错误的方式获取图像，文件的路径取决于您的战争名称，因此最好的方法是使用，所以如果您有这种结构：

Webapp
 |-- img
 |    `-- login.jpg
 `-- WEB-INF
      |-- 
      `--

您的图片 url 将是：'my_portlet_021_/img/login.jpg' 并将此图片设置为背景，我建议在 jsp 中这样使用 jQuery：

var url='url(<%= request.getContextPath()%>/img/login.jpg)';
$('.hr').css("background-image", url);

这里<%= request.getContextPath()%> 获取您的网络应用程序的名称。

【讨论】：