Django项目中HTML页面引用同目录图片无法显示求助

问题根源 #

你把图片文件放在了templates目录下，Django的模板目录仅用于存放模板文件，框架不会自动为该目录下的静态资源（如图片、CSS、JS）提供访问路由，直接用相对路径引用自然无法被服务器解析。

正确解决步骤 #

1. 调整文件结构 #

在你的home应用下新建静态文件目录，把图片移过去，最终结构如下：

mysite/
├── home/
│   ├── templates/
│   │   └── home/
│   │       └── main.html
│   └── static/
│       └── home/
│           └── Bugs.jpg
└── mysite/
    └── settings.py

2. 确认静态文件配置 #

打开项目根目录的settings.py，确保包含以下配置（默认已开启，可核对）：

INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    'home',
    # ...
]

STATIC_URL = '/static/'

3. 修改模板中的图片引用 #

在main.html顶部加载static模板标签，然后用正确的路径引用图片：

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>B. Rabbit</title>
  <meta charset="UTF-8">
</head>
<body>

    <h3>Applications</h3>

    <ul>
        <li><p><a href="/polls">A Polls Application.</a></p></li>
        <li><p><a href="/hello">Hello World Application.</a></p></li>
    </ul>

    <img src="{% static 'home/Bugs.jpg' %}">

</body>
</html>

4. 重启服务器验证 #

重启Django开发服务器，刷新页面就能看到图片正常显示了。

额外提醒 #

• 开发环境下django.contrib.staticfiles会自动处理静态文件路由；生产环境需要运行python manage.py collectstatic，把所有静态资源统一收集到指定目录，再由Nginx这类Web服务器提供访问。
• 别再把静态资源塞templates目录了，这是Django的规范，也能避免后续部署时踩坑。

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