当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):
@@##@@
⚠️ 注意事项:
总结:图片不显示的根本原因不是“路径写错”,而是未遵循Web框架的静态资源约定。将图片归入static/目录,并用框架推荐的方式引用,即可彻底解决404问题。