Flask中url_for加载static子目录图片返回200但无法渲染问题

问题成因 #

核心错误为HTML标签属性使用不规范：

• <img>标签加载图片资源必须使用src属性指定资源地址，你当前代码中错误使用了仅适用于<a>、<link>等标签的href属性，因此浏览器无法识别需要加载的图片资源，只会展示alt属性的占位文本。
• 日志中出现的GET /static/images/logo.png 200请求，实际是页面头部<link rel=icon>标签发起的favicon请求，并非<img>标签发起的图片加载请求。
• 次要优化点：url_for('static', filename='xxx')的filename参数不需要加开头的斜杠，不符合Flask静态资源引用的规范写法，部分场景下可能导致路径解析异常。

解决方法 #

1. 替换所有<img>标签中的href属性为src属性，同时去掉filename参数开头的斜杠
   修改前错误代码：

<img href="{{ url_for('static', filename='/images/logo.png') }}" alt="highbrow">

修改后正确代码：

<img src="{{ url_for('static', filename='images/logo.png') }}" alt="highbrow">

2. 全局校验所有静态资源引用属性：
   • <script>标签引用JS文件统一使用src属性
   • <link>标签引用CSS、favicon统一使用href属性
3. 若修改属性后仍无法正常加载，可通过浏览器开发者工具的网络面板，查看<img>标签发起的请求返回内容，排查是否存在图片文件损坏、格式不匹配的问题。

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