当html中使用相对路径引用图片(如 `öppettider.jpg`)却返回404错误时,根本原因通常是静态资源未被web服务器正确托管——django等框架默认不自动提供根目录下的图片文件,需将图片放入`static/`目录并用`{% static %}`模板标签引用。
在Django项目中,直接将图片放在HTML同级目录或任意非标准位置(如模板根目录)是无效的。Web服务器(如Django开发服务器)仅通过配置的静态文件路径(STATIC_URL 和 STATICFILES_DIRS)提供资源,且不会自动映射当前模板所在路径下的文件。
✅ 正确做法如下:
将图片放入 static/ 目录
推荐结构:
myproject/
├── manage.py
├── myapp/
└── static/
└── images/
└── öppettider.jpg ← 放在此处在HTML模板中使用 {% static %} 标签(需先加载static)
{% load static %}
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
Öppettider
@@##@@
{% endblock %}确认Django设置已启用静态文件服务(开发环境):
settings.py 中应包含:
STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / "static"] # 或其他路径
⚠️ 注意事项:
总结:静态资源必须显式声明为“可服务”,而非依赖文件系统相对位置。遵循 static/ → {% static %} → 正确路径
三步法,即可彻底解决图片404问题。