如何在Django项目中正确添加图片并解决加载报错问题

你之前的配置存在4个明确错误，逐一对应修复即可：

• 路径拼接错误：STATICFILES_DIRS中os.path.join(BASE_DIR, '/static/')开头多余的斜杠会让路径直接指向系统盘根目录下的C:/static/，这就是控制台报staticfiles.W004警告的直接原因
• 模板标签未注册：使用{% static %}标签前未在模板头部加载静态标签库，这就是页面抛出Invalid block tag on line 163: 'static'错误的原因
• 静态资源目录放置错误：静态文件不能放在templates目录下，也不要手动存到staticfiles目录——该目录是部署阶段执行collectstatic命令时自动导出静态资源用的，不是开发阶段存放源码静态资源的位置
• 路径引用规则错误：硬编码相对路径、跨目录跳转路径都不符合Django静态文件的路由映射规则，开发阶段不要用这种写法

分步修复操作 #

1. 修正settings.py配置 #

删除之前自定义的IMAGE_URL、IMAGE_ROOT所有相关配置，替换为以下正确的静态/媒体文件配置：

import os

# 静态资源访问路由前缀，保持默认即可
STATIC_URL = '/static/'

# 开发阶段存放自定义静态资源的目录，注意路径不要加开头的斜杠
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

# 部署时collectstatic命令导出静态文件的目标目录，开发阶段不要手动往里面存文件
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# 用户上传媒体文件配置，你自己的项目背景图属于静态资源，不需要存到media目录
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

如果你用的是Django 3.1+版本，Path写法的BASE_DIR对应配置为：

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]
STATIC_ROOT = BASE_DIR / 'staticfiles'
MEDIA_ROOT = BASE_DIR / 'media'

2. 调整目录结构 #

在项目根目录（和settings.py同级的位置）创建static目录，按分类放静态资源，正确的目录结构参考：

项目根目录/
├── 业务app目录/
├── templates/
│   └── Index.html
├── static/          # 手动创建，开发阶段存放所有自定义静态资源
│   └── images/
│       └── loup.png # 把搜索栏背景图放到这里
├── staticfiles/     # 无需手动操作，collectstatic命令自动生成填充
├── media/
├── settings.py
└── urls.py

3. 修正urls.py路由 #

删除之前添加的IMAGE相关路由，替换为开发环境的静态/媒体路由映射：

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

urlpatterns = [
    # 保留你原有的业务路由
]

# 仅DEBUG=True的开发环境生效，生产环境由Nginx等Web服务器处理静态资源
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. 修正模板代码 #

第一步先在Index.html最顶部（所有用到static标签的位置之前）添加静态标签加载语句：

{% load static %}

然后修改背景图的CSS样式，路径和static目录下的文件层级对应即可：

background-image: url("{% static 'images/loup.png' %}");

注意：路径字符串不要加多余空格，不要写../这类相对跳转路径，{% static %}标签会自动生成正确的绝对访问路径。

5. 验证 #

• 重启Django开发服务
• 若仍加载失败，按F12打开浏览器控制台看渲染后的图片请求地址，对应检查项目目录下文件是否存放在正确位置即可。

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