Jumbotron 背景图像不起作用。我究竟做错了什么？答案

【问题标题】：Jumbotron background image not working. What am I doing wrong?Jumbotron 背景图像不起作用。我究竟做错了什么？
【发布时间】：2020-08-30 11:01:34
【问题描述】：

所以我不确定我在这里做错了什么。我尝试了几种不同的方法，如果我通过我的 HTML 手动将我的照片插入到 Jumbotron 所在的位置，我的图片会加载，尽管有我不想要的填充并且它不在背景中。我不明白我在这里做错了什么。我尝试了两种不同的方法，但都不起作用。唯一有效的方法是将img src= 直接进入 Jumbotron 部分，但就像我说的那样，这就是我想要的。那么我在这里做错了什么？

项目网址

    from django.contrib import admin
from django.urls import path, include
from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('dating_app.urls', namespace= 'dating_app')),


] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py

  STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "dating_app/static"),
]

home.html/styles

.JumboHeaderImg{
  background-image: url("/Users/papichulo/Documents/DatingAppCustom/dating_app/static/images/jumbo.jpg");

}



    .JumboHeaderImg{
  background-image: "{% static 'images/jumbo.jpg' %}";

home.html/jumbotron

 <div class="jumbotron  JumboHeaderImg">

styles.css

.navbar-nav  li{
  padding-left:35px;
  padding-right:10px;
  margin-top: -20px;
  margin-bottom: -20px;

}

/* Modify the backgorund color */ 
.navbar-custom { 
    background-color: #ffffff; 
} 


.jumbotron{
    background-color: #f76062228c;
}
.navbar .nav-item{
    color: red;
}



.notification {



  text-decoration: none;
  padding:50;
  position: relative;
  display: inline-block;

}



.notification .badge {
  position: absolute;
  top: -15px;
  right: -10px;
  padding: 5px 5px;
  border-radius: 40%;
  background-color: red;
  color: white;
}

【问题讨论】：

home.html stackoverflow.com/questions/6052341/…987654321@的样式文件在哪里
那里得到它
从我看到的代码来看，代码很好，所以你需要调试。将图像更改为 100% 工作图像，即mywebsite.com/myimage.jpg。它有效吗？如果是这样，问题是服务器看到您的图像链接。如果没有，那么你有一些 CSS 覆盖了 background-img 属性。右击 Jumbotron 和 Inspect，看看 background-img 属性设置成什么

标签： css django bootstrap-4

【解决方案1】：

您必须在 django 模板中以这种方式调用静态图像，而不是硬编码

{% load static %}
<img src="{% static 'images/jumbo.jpg' %}" alt="">

在css中你可以这样调用

style="background-image: url('{% static "images/jumbo.jpg"%}')";

【讨论】：

我已经在 css 中尝试过，但无法正常工作。已经加载了静态
确保您在设置文件中添加了 STATIC_URL = '/static/'。主 url 中的这段代码 urlpatterns = [ # ... URLconf 的其余部分在这里 ... ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
我刚刚添加了我的 settings.py。我相信我的 STATIC_URL 是正确的
还有我的项目网址。
首先，第一个版本不起作用，第二个版本格式不正确，缺少一个或一个额外的引号。修复它，以便我可以使用 try it。

【解决方案2】：

您的 css 文件是否链接到 HTML？如果不是，那么可能是文件路径问题

【讨论】：

Jumbotron 代码直接在 home.html 中，在部分的最顶部
第一个'JumboHeaderImg'
你有结束语
吗？尝试将图像本身与 HTML 文件放在同一目录中，以便您可以使用路径“jumbo.jpg”

如果我直接进入 html，图像本身就可以工作