Django静态文件失效：CSS无效果、图片不显示求助

问题现象 #

CSS样式完全不生效，页面图片无法显示。

当前配置与代码 #

settings.py 静态文件配置 #

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'social_media')
]

base.html 模板代码 #

{% load static %}
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type= "text/css" href="{% static 'style.css' %}">
    </head>
    <body>
        {% block navbar %}
        {% include 'parts/navbar.html' %}
        {% endblock %}
        {% block content %}
        {% endblock %}
    </body>
</html>

页面模板引用代码 #

{% extends 'base.html' %}
{% load static %}
{% block content %}
<!--stuff-->
{% endblock content %}

目录结构 #

已尝试的无效操作 #

• 使用Edge隐私窗口访问
• 删除并重建style.css文件
• 重新执行静态文件收集命令

排查与解决步骤 #

1. 修正STATICFILES_DIRS路径
   从目录结构看，静态文件应该放在social_media/static/目录下，但当前配置指向了social_media根目录，Django找不到正确的文件位置。修改配置为：

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

   或者遵循Django规范，在social_media/static/下再建一个和app同名的子目录（比如social_media/static/social_media/），把style.css放进去，引用时写成{% static 'social_media/style.css' %}。

2. 调整STATIC_URL格式
   将STATIC_URL = 'static/'改为STATIC_URL = '/static/'，避免相对路径导致的URL解析错误。

3. 检查DEBUG模式与静态文件托管

   • 开发环境下确保DEBUG=True，Django会自动处理静态文件的托管；
   • 生产环境（DEBUG=False）必须执行python manage.py collectstatic，把所有静态文件收集到STATIC_ROOT目录，同时配置服务器（如Nginx）指向该目录提供静态文件访问。

4. 验证静态文件请求路径
   打开浏览器开发者工具（F12），切换到Network标签，刷新页面查看style.css的请求状态：

   • 如果返回404，说明路径配置错误，对照生成的URL检查文件实际位置；
   • 如果返回200但样式不生效，检查CSS文件内容是否正确，或是否存在样式覆盖问题。

5. 确认collectstatic执行结果
   执行python manage.py collectstatic后，查看BASE_DIR/static/目录下是否存在style.css文件。如果没有，说明源文件路径配置错误，Django未收集到文件。

内容的提问来源于stack exchange，提问作者Mazen Mamdouh