Jumbotron 背景图像不起作用。我究竟做错了啥？

Posted 2023-02-24

【中文标题】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 ***.com/questions/6052341/…987654321@的样式文件在哪里

那里得到它

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

【参考方案1】：

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

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

在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，图像本身就可以工作