Django模板继承时静态图片文件加载失败问题求助

问题概述 #

使用charts.html扩展base.html时，base.html中的favicon、样式文件均可正常加载，但charts.html内的barchart_coins.png图片无法加载。

相关代码与配置 #

charts.html代码 #

{% extends "main/base.html" %}
{% load  static %}
{% block title %}Charts{% endblock %}
{% block subtitle %}<h1 class="h1">Welcome to your crypto wallet visualized</h1>{% endblock %}
{% block content %}
   <img type="image/png" src"{% static "images/barchart_coins.png" %}" alt="barchart">
{% endblock %}

base.html代码 #

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">            
    <link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">
    <title>
        {% block title %}<h1>You forgot to place a title in your file<h1>{% endblock %}
    </title>
    <link rel="icon" type="image/png" href="{% static 'main/images/bitcoin_fav.png' %}">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/overview">Overview</a></li>
                <li><a href="/data">General data</a></li>
              </ul>
          </nav>
    </header>
    <div class="body">
    {% block subtitle %}<h2>>ou forgot to place a subtitle in your file</h2>{% endblock %}
    {% block form %}<p>You forgot to place a fom in your file</p>{% endblock %}
    {% block content %}
    <p>You forgot to place a content in your file</p>
    {% endblock %}
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

settings.py相关配置 #

STATIC_URL = '/static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static/main'),
)

项目文件结构 #

crypto_api_site
    >bitvavo_api
    >crypto_api_site
        >settings.py
    >main
        >static
             >main
                 >images
                      >barchart_coins.png
        >templates
             >main
                 >base.html
                 >charts.html

解决建议 #

1. 修复img标签语法错误
   charts.html中的img标签存在语法错误：src属性后缺少等号，导致浏览器无法正确解析静态资源路径。修改为：

   <img type="image/png" src="{% static 'main/images/barchart_coins.png' %}" alt="barchart">
   

2. 修正STATICFILES_DIRS配置
   当前STATICFILES_DIRS指向的是BASE_DIR/static/main，但实际静态文件存储在main/app下的static/main目录。更新配置为：

   STATICFILES_DIRS = (
       os.path.join(BASE_DIR, 'main/static/main'),
   )
   

3. 验证静态资源收集（生产环境）
   如果是生产环境，确保已执行python manage.py collectstatic命令，将所有静态文件收集到STATIC_ROOT指定的目录中。

4. 检查静态文件路径匹配
   对比base.html中favicon的路径写法{% static 'main/images/bitcoin_fav.png' %}，确保charts.html中的图片路径与之一致，避免路径层级错误。

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