Django没有从CSS文件加载图像答案

【问题标题】：Django not loading images from CSS fileDjango没有从CSS文件加载图像
【发布时间】：2020-07-25 22:49:59
【问题描述】：

我有一个链接到 CSS 的 HTML 文件，它工作正常

    <link rel="stylesheet" href="{% static '/Website/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static '/Website/css/style.css' %}" />
    <link rel="stylesheet" href="{% static '/Website/css/ionicons.min.css' %}" />
    <link rel="stylesheet" href="{% static '/Website/css/font-awesome.min.css' %}" />e here

然后我在 HTML 文件中有几张加载正常的图片

<link rel="shortcut icon" type="image/png" href="{% static '/Website/images/fav.png' %}"/>

一个 div 元素 id <div id="lp-register"> 显然链接到上面的 style.css 选择器，如下所示

#lp-register{
  background: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0)), url('../images/test.png') fixed no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100vh;
}

图像位于静态文件夹中，结构如下

static 
   - images 
       - test.png

并且setting.py 有正确的静态文件定义

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

当我加载没有加载特定图像的 HTML 页面时，我在 Django 服务器中没有看到任何错误，此外，如果我检查元素，我发现 url('../images/test.png') 仍然保留旧设置

linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.7)), url("http://placehold.it/1920x1280") fixed no-repeat

并且无论如何都不会改变。除此之外，如果我检查元素并将设置手动修改为

 linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0)), url('../images/test.png') fixed no-repeat

这是我想要的，似乎工作正常，但是当我在 CSS 中更改它时却没有

有人可以帮忙吗？

【问题讨论】：

我在文件夹结构或设置中的任何地方都看不到Website。尝试删除此 url 部分。
该文件夹结构仅适用于静态文件网站位于静态之上，除了需要加载 test.png 文件的 css 文件外，其他地方都可以正常工作
所以真正的文件夹结构是static/Website/static/images，对吧？
不，不，真正的结构是 NameProject/static/website/images 因为 css 的图像是 NameProject/static/website/css 。 css 工作，但加载 css 文件中定义的图像不
顺便问一下，你是指 dev 还是 prod server，DEBUG=true 还是 false？

标签： python css django django-staticfiles

【解决方案1】：

{% load static%} 在您的 HTML 中，然后加载样式表。您已经以正确的方式在 settings.py 中设置了静态文件，我认为这应该可以。

url('../images/test.png') 对于 CSS 中的这种链接我们必须使用这种方式来调用这些静态文件

url('{% static 'images/test.png' %}')

【讨论】：