如何使用 Django 从元素的 CSS 中调用静态图像？答案

【问题标题】：How do I call a static image from the CSS of an element with Django?如何使用 Django 从元素的 CSS 中调用静态图像？
【发布时间】：2021-05-27 14:05:22
【问题描述】：

我使用 bootstrap studio 制作了一个简单的前端页面，并且我正在学习 django，所以我正在为应用程序使用 bootstrap 前端。

所有静态资源都在我调用的静态文件夹中：
{% load static %}

图片位于：static 'img/map.png'

在下面的代码中，div 使用 css 调用背景图片 - background:url('assets/img/map.png')
但这当然行不通，因为我有一个名为 static 的文件夹，其中包含静态资产

<div class="col" style="text-align: center;display: flex;justify-content: center;align-items: center;flex-flow: column;min-width: 300px;background: url('assets/img/map.png');background-size: cover;">
        <div style="background: rgba(255,255,255,0.85);margin-top: 66px;margin-bottom: 66px;">
            <h1>Diverse Locations</h1>
        </div>
    </div>

有什么方法可以让 div 指向正确的背景图片？

注意：我通过将静态内容复制到项目文件夹中来创建静态文件夹，定义了 STATIC_ROOT 和 STATICFILES_DIRS 变量并运行命令：python manage.py collectstatic。

【问题讨论】：

用更具体的 CSS 覆盖它？
尝试使用static模板标签：background: url('{% static 'img/map.png' %}');
@IainShelvington 谢谢你的工作。您可以将其添加为答案

标签： css django jinja2

【解决方案1】：

使用static模板标签：background: url('{% static 'img/map.png' %}');

正如@IainShelvington 建议的那样

【讨论】：