Django模板加载静态文件失败问题排查与解决

问题背景 #

一直在排查Django模板加载静态文件的问题，操作步骤参考多篇教程但始终无法解决。模板中加载静态资源时，浏览器返回404错误，资源无法正常加载。

项目配置与代码 #

settings.py 配置 #

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

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

base.html 模板代码 #

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" sizes="16x16" href="{% static "favicon/favicon.png" %}">
    <title>Title</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

{% include "navbar.html" %}

<img src="{% static "favicon/favicon.png" %}" alt="img"/>

<main class="container mx-auto p-8">
    {% block main %}{% endblock %}
</main>
</body>
</html>

排查过程与错误现象 #

• 确认目录路径无误，但模板无法定位资源
• 尝试用{% load staticfiles %}替代{% load static %}，报错找不到staticfiles（Django 4.x已移除该标签）
• 服务器日志显示静态资源请求返回404：

[27/Jul/2022 19:01:58] "GET / HTTP/1.1" 200 15090
[27/Jul/2022 19:01:58] "GET /static/logo.png HTTP/1.1" 404 1783
[27/Jul/2022 19:01:59] "GET /static/favicon/favicon.png HTTP/1.1" 404 1816

最终解决方案 #

移除STATIC_ROOT配置项后，所有图片及静态文件均可正常加载。

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