Django项目使用模板继承后静态图片加载报错如何解决

问题原因 #

• 子模板index.html未加载static模板标签：Django的模板标签加载逻辑不支持继承，虽然父模板base.html已经加载了static标签，但子模板中如果要使用该标签，必须在自身顶部单独声明。
• header区域logo图片路径写法错误：直接使用相对路径images/logo-white.png不会被Django解析为静态资源路径，无法正确匹配到static/homepage/images下的资源。
• （可选）静态资源配置缺失：未正确配置项目的静态资源路由或设置项。

修复步骤 #

1. 给index.html添加static标签加载声明，修改后顶部代码如下：

{% extends 'homepage/base.html' %}
{% load static %}

{% block content %}
<!-- 原有内容保持不变 -->

2. 修改logo图片的路径写法，替换原有路径为static标签包裹的正确路径：

<div id="logo">
    <img src="{% static 'homepage/images/logo-white.png' %}" alt="logo">
</div>

3. 确认settings.py中静态资源相关配置正确：
   • 确保INSTALLED_APPS列表中已包含django.contrib.staticfiles
   • 确保配置了STATIC_URL = 'static/'
4. 开发环境下（DEBUG = True），需要在项目根目录的urls.py中添加静态资源路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有路由配置保持不变
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

5. 确认static/homepage/images目录下的图片文件名、后缀和模板中引用的完全一致，注意Linux/macOS系统下文件名大小写敏感。

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