当html中使用相对路径引用图片（如 `öppettider.jpg`）却返回404错误时，根本原因通常是静态资源未被web服务器正确托管——django等框架默认不自动提供根目录下的图片文件，需将图片放入`static/`目录并用`{% static %}`模板标签引用。

在Django项目中，直接将图片放在HTML同级目录或任意非标准位置（如模板根目录）是无效的。Web服务器（如Django开发服务器）仅通过配置的静态文件路径（STATIC_URL 和 STATICFILES_DIRS）提供资源，且不会自动映射当前模板所在路径下的文件。

✅ 正确做法如下：

1. 将图片放入 static/ 目录
   推荐结构：

   myproject/
   ├── manage.py
   ├── myapp/
   └── static/
       └── images/
           └── öppettider.jpg   ← 放在此处

2. 在HTML模板中使用 {% static %} 标签（需先加载static）

   

   ApiPost接口调试与文档生成工具

   ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

   下载

   {% load static %}
   {% extends "base.html" %}
   {% block title %}Home{% endblock %}
   {% block content %}
     <h3>Öppettider</h3>
     @@##@@
   {% endblock %}

3. 确认Django设置已启用静态文件服务（开发环境）：
   settings.py 中应包含：

   STATIC_URL = '/static/'
   STATICFILES_DIRS = [BASE_DIR / "static"]  # 或其他路径

⚠️ 注意事项：

• ❌ 不要使用 ./öppettider.jpg、../images/öppettider.jpg 等纯相对路径——它们依赖于请求URL路径，而非文件系统结构，在Django模板中不可靠；
• ❌ 避免将图片放在 templates/ 目录下——该目录仅用于渲染HTML，不提供HTTP访问；
• ✅ 开发时运行 python manage.py collectstatic 并非必需（仅上线部署用），但需确保 DEBUG=True 且 static 配置正确；
• ? 若仍404，请检查浏览器开发者工具的Network面板，确认请求的完整URL（如 http://127.0.0.1:8000/static/images/öppettider.jpg），再验证该路径下文件是否存在（注意大小写和特殊字符编码，如 ö 在URL中可能需UTF-8编码，建议优先使用ASCII命名避免兼容性问题）。

总结：静态资源必须显式声明为“可服务”，而非依赖文件系统相对位置。遵循 static/ → {% static %} → 正确路径 三步法，即可彻底解决图片404问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！