
当html中图片无法显示且服务器返回404错误时,通常是因为图片路径未被web框架正确识别——关键在于静态资源(如.jpg)必须放在web框架指定的静态文件目录中,并通过正确的相对或绝对路径引用。
在Django、Flask等主流Python Web框架中,浏览器无法直接访问项目任意目录下的文件。即使你在Python脚本中能用open()成功读取öppettider.jpg,也不代表该文件可通过HTTP请求(如/öppettider.jpg)被访问。终端日志 "GET /öppettider.jpg HTTP/1.1" 404 明确表明:浏览器尝试向根路径请求该图片,但Web服务器未配置该路由或未将其视为静态资源。
✅ 正确做法(以常见框架为例):
-
Django:
将图片放入 static/ 子目录(如 myapp/static/images/öppettider.jpg),并在HTML中使用 {% static %} 模板标签:{% load static %} @@##@@并确保 settings.py 中已配置:
STATIC_URL = '/static/' STATICFILES_DIRS = [BASE_DIR / "static"]
-
Flask:
默认将 static/ 目录作为静态资源根目录。把图片放在 static/öppettider.jpg,然后使用相对路径(注意:不是 ./öppettider.jpg,而是 /static/öppettider.jpg 或更推荐的 url_for):@@##@@
⚠️ 注意事项:
立即学习“前端免费学习笔记(深入)”;
- ❌ 避免使用 src="öppettider.jpg"(无前缀)——这会让浏览器请求 http://localhost:8000/öppettider.jpg,而该路径未被映射到文件系统;
- ❌ 避免 src="./öppettider.jpg"——这是相对于当前HTML页面URL的路径,极易因路由嵌套出错;
- ✅ 始终通过框架提供的静态资源机制({% static %} 或 url_for('static', ...))生成路径,确保可移植性和安全性;
- ? 文件名含非ASCII字符(如 ö)一般可被支持,但建议重命名为 oppettider.jpg 并更新引用,避免潜在编码问题(尤其在旧版服务器或Windows环境下)。
总结:图片不显示的根本原因不是“路径写错”,而是未遵循Web框架的静态资源约定。将图片归入static/目录,并用框架推荐的方式引用,即可彻底解决404问题。












