HTML中关联图片无法显示，终端返回404错误求助

核心问题分析 #

终端返回"GET /öppettider.jpg HTTP/1.1" 404，说明服务器无法在请求路径下找到图片文件——本地能打开图片，但服务器的静态文件路由规则、URL编码逻辑和本地文件系统不同，尤其是带ö这类特殊字符的文件名，极易出现编码不匹配的情况。

具体解决方案 #

1. 用框架静态文件路由生成路径（推荐） #

你使用了Jinja2模板（{% extends %}语法），说明是Flask/Django这类框架项目，这类框架要求静态文件放在指定目录（默认是static），并通过模板函数生成正确路径：

• 将öppettider.jpg放到项目的static文件夹中
• 修改HTML代码为：

{% extends "base.html" %} {% block title %}Home{% endblock %} {% block content%}
  <h3>Öppettider</h3>
  <img src="{{ url_for('static', filename='öppettider.jpg') }}" alt="Skövde Skatehall öppettider">
{% endblock %}

url_for会自动处理特殊字符的URL编码（把ö转为%C3%B6），同时确保服务器能正确定位到静态文件。

2. 排查文件名与路径匹配 #

• 检查服务器根目录（或静态文件目录）下是否真的存在öppettider.jpg，注意Linux系统大小写敏感，文件名的大小写必须和代码里完全一致
• 若不想用框架路由，需确保图片文件放在服务器的根静态目录下，或者在代码里写完整的相对路径（比如./static/öppettider.jpg），但这种方式容易因路径层级变化出错。

3. 临时排除特殊字符问题 #

把文件名改为纯英文（比如opening-hours.jpg），修改HTML里的src对应值，测试是否能正常显示。如果可以，说明是特殊字符的URL编码问题，回到方案1用框架路由处理最稳妥。

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