Django项目使用HTML模板时无法加载图片与CSS的问题

1. 确认settings.py静态文件配置正确 #

确保settings.py中包含以下核心配置，路径要和你的项目结构匹配：

STATIC_URL = '/static/'

# 指向项目根目录下的static文件夹（需与实际路径一致）
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

# 生产环境静态文件收集目录（开发环境可提前配置）
STATIC_ROOT = BASE_DIR / 'staticfiles'

2. 模板头部必须加载static标签 #

你的模板开头必须添加{% load static %}，否则{% static %}模板标签无法生效，修改后头部如下：

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %} <!-- 放在所有static标签之前 -->
    <meta charset="utf-8">
    <!-- 其余meta标签与内容... -->

3. 核对静态文件实际路径 #

从你的文件结构来看，需确保：

• 项目根目录下存在static文件夹，且内部路径为static/assets/css/、static/assets/images/等
• 模板中{% static 'assets/css/bootstrap.min.css' %}的路径与实际文件路径完全一致，注意Linux/macOS系统区分大小写

4. 开发环境开启静态文件服务 #

确保INSTALLED_APPS中包含django.contrib.staticfiles（默认已包含），它会自动处理开发服务器的静态文件请求：

INSTALLED_APPS = [
    # 其他应用...
    'django.contrib.staticfiles',
]

5. 排查浏览器请求错误 #

打开浏览器开发者工具（F12）→ 网络标签，刷新页面查看请求状态：

• 404错误：路径配置错误，检查STATIC_URL、文件实际路径或static标签写法
• 403错误：权限问题（开发环境少见，生产环境需检查目录权限）

6. 修正外部资源的标签使用 #

模板中外部CDN资源（如Google Fonts、IE兼容脚本）无需套{% static %}标签，直接使用完整URL：

<!-- 正确写法 -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

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