为什么我的图像没有加载到我的 Jumbotron 的背景中？答案

【问题标题】：Why is my image not being loaded into the background of my Jumbotron?为什么我的图像没有加载到我的 Jumbotron 的背景中？
【发布时间】：2020-05-20 04:09:46
【问题描述】：

所以我不确定我在这里做错了什么。我尝试了几种不同的方法，如下所示，让我的图像成为我的 Jumbotron 的背景，但它们都不起作用。我知道加载静态或类似的东西不是问题，因为直接在 Jumbotron 部分执行 img src= 是可行的，但它实际上并不是 Jumbotron 的背景。那么我在这里做错了什么？

home.html/styles

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

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

     <div class="jumbotron  JumboHeaderImg">

style.css

.jumbotron{

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

}

【问题讨论】：

标签： html css django

【解决方案1】：

如果你这样做：

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

除非您将 CSS 文件呈现为模板，否则该 url 将直接为 {% static "images/jumbo.jpg"%}，因为标签 static 没有被解析。

为了设置您的图片网址，您可以在模板中使用内联样式，这样您的静态标签就可以工作。如果您想在 css 文件中执行此操作，则必须对图像 url 进行编码。

内联样式应该是这样的：

<div class="jumbotron" style="background-image: url('{% static "images/jumbo.jpg"%}')">
...
</div>

【讨论】：