背景图像不加载图像

Question

我在 HTML page.I 的 Django 应用程序中创建登录页面时，在样式中使用背景图像时遇到问题，当我执行该页面时，背景图像未显示。有趣的是，这段代码昨天有效，今天不行。

为了避免路径问题，我已经特意将图片和文件放在一个文件夹中。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title> Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

  <style>
    body {
      margin-top: 20px;
      background: rgb(184, 213, 242);
    }
    
    .account-block {
      padding: 0;
      background-image: url('login.jpg') !important;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      position: relative;
    }
    
    .account-block .overlay {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.4);
    }
    
    .account-block .account-testimonial {
      text-align: center;
      color: #fff;
      position: absolute;
      margin: 0 auto;
      padding: 0 1.75rem;
      bottom: 3rem;
      left: 0;
      right: 0;
    }
    
    .text-theme {
      color: #5369f8 !important;
    }
    
    .btn-theme {
      background-color: #5369f8;
      border-color: #5369f8;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="main-wrapper" class="container" style="text-align:center; width:100%;">
    <div class="row justify-content-center">
      <div class="col-xl-10">
        <div class="card border-0">
          <div class="card-body p-0">
            <div class="row no-gutters">
              <div class="col-lg-6">
                <div class="p-5">
                  <div class="mb-5">
                    <h3 class="h4 font-weight-bold text-theme">Login</h3>
                  </div>

                  <h6 class="h5 mb-0">Welcome back!</h6>
                  <p class="text-muted mt-2 mb-5">Enter your User ID and password to access admin panel.</p>

                  <form method="POST" action="">
                    {% csrf_token %}
                    <div class="form-group">
                      <label for="exampleInputText1">User ID</label>
                      <input type="text" name="username" class="form-control" id="exampleInputText1">
                    </div>
                    <div class="form-group mb-5">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <button type="submit" class="btn btn-theme">Login</button>

                    <a href="#l" class="forgot-link float-right text-primary">Forgot password?</a>
                  </form>
                </div>
              </div>

              <div class="col-lg-6 d-none d-lg-inline-block">
                <div class="account-block rounded-right">
                  <div class="overlay rounded-right"></div>
                  <div class="account-testimonial">
                    <h4 class="text-white mb-4">Test 1</h4>
                    <p class="lead text-white">"Test 2"</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <!-- end card-body -->
          {% for message in messages %}
          <p id="messages">{{message}}</p>
          {% endfor %}
        </div>
        <!-- end card -->

        <p class="text-muted text-center mt-3 mb-0">Don't have an account? <a href="{% url 'register' %}" class="text-primary ml-1">register</a></p>

        <!-- end row -->
      </div>
      <!-- end col -->
    </div>
    <!-- Row -->
  </div>
</body>

</html>

关于如何解决这个问题有什么想法吗？

Answer 1

我在这里可能是错的，但我会尝试这个解决方案。

尝试改变

background-image: url('login.jpg')

至：

background-image: url('../indentification/login.jpg')

我不确定你是否完全消除了路径问题。

Answer 2

最后，我创建了 content 文件夹并且：background-image: url('../../static/app/content/login.jpg');

背景图像不加载图像

Background-image don't load an image

html

css

background

background-image