Django项目中HTML图片无法显示（Mac环境）求助

问题核心原因 #

1. CSS类名错误：你的img标签用了class="header.jpg"，类名不能包含文件后缀，应该对应你定义的.header-image类
2. Django静态文件路径错误：Django不允许直接引用模板目录下的图片，必须遵循静态文件管理规则

具体修复步骤 #

1. 修正CSS类名与模板语法错误 #

清理代码里的多余符号（比如多余的}），并把img标签的class改成正确的类名：

<div class="image-container">
  <img class="header-image" src="{% static 'header.jpg' %}">
</div>

2. 配置Django静态文件规则 #

• 在项目根目录创建static文件夹，将header.jpg移入该文件夹
• 打开项目的settings.py，确保以下配置正确：

INSTALLED_APPS = [
    # 保留原有其他app配置
    'django.contrib.staticfiles',  # 确认该条目已添加
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",  # 指向你创建的static目录
]

3. 在模板中加载静态文件标签 #

在HTML模板的最开头添加静态文件加载标签，否则无法使用{% static %}语法：

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <style>
    .header-image {
      width: 100%;
    }
    .image-container {
      background-color: azure;
      padding: 16px;
      padding-left: 150px;
      padding-right: 150px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img class="header-image" src="{% static 'header.jpg' %}">
  </div>
</body>
</html>

4. 验证静态文件可用性 #

启动Django开发服务器后，直接访问http://localhost:8000/static/header.jpg，如果能正常显示图片，说明配置正确，此时刷新页面即可看到模板中的图片正常加载。

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