Django静态文件中background_image加载失败（404错误）问题咨询

修改背景色功能正常，但设置background-image时出现资源加载失败错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

本地图片路径：D:\Todos\Todosproject\static\images\svitlana-j7Ssk0Km8Jo-unsplash.jpg

相关代码 #

static/css/styles.css #

body {
 background-image: url('/Todos/Todosproject/static/images/svitlana-j7Ssk0Km8Jo-unsplash.jpg');
}

base.html #

<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}"/>
    <title>
        {% block title %}
        {% endblock title %}
    </title>
</head>
<body>
{% block body %}
{% endblock body %}
</body>
</html>

settings.py配置 #

STATIC_URL = 'static/'

STATICFILES_DIRS = [BASE_DIR / "static"]

解决方法 #

问题根源是CSS中图片路径写法错误，Django的静态资源需要遵循框架的资源寻址规则，不能直接写本地磁盘绝对路径，以下是两种可行方案：

1. 使用相对路径（推荐）
   由于styles.css位于static/css/目录，图片在static/images/目录，相对路径应写为：

body {
 background-image: url('../images/svitlana-j7Ssk0Km8Jo-unsplash.jpg');
}

2. 通过Django静态标签生成URL
   在HTML的内联样式中使用{% static %}标签直接生成正确的资源URL：

<head>
    <!-- 原有代码 -->
    <style>
        body {
            background-image: url("{% static 'images/svitlana-j7Ssk0Km8Jo-unsplash.jpg' %}");
        }
    </style>
</head>

3. 验证静态资源配置
   确认BASE_DIR指向项目根目录（D:\Todos\Todosproject），开发服务器会自动从STATICFILES_DIRS配置的目录中读取静态资源，无需手动拼接本地路径。

内容的提问来源于stack exchange，提问作者الغائب