Bootstrap+Flask项目导航栏Logo仅首页加载问题求助

问题原因 #

• 静态资源使用了相对路径：首页处于根路由/，static/F1Logo.svg能正确指向根目录下的static文件夹；但子页面（如/news/、/drivers/）会把相对路径解析为/news/static/F1Logo.svg，该路径不存在，导致图片加载失败。
• 本地绝对路径无效是因为浏览器的安全限制，不允许直接访问本地文件系统的路径。

解决方案 #

使用Flask内置的url_for模板函数生成静态资源的绝对路径，该函数会自动适配当前路由层级，生成正确的资源URL。

1. 修改导航栏Logo的路径 #

将base.html中图片的src属性替换为url_for生成的路径：

<a class="navbar-brand" href="/">
  <img src="{{ url_for('static', filename='F1Logo.svg') }}" alt="F1 Logo" width="50%" height="50%">
</a>

2. 修改浏览器图标（Favicon）的路径 #

同样替换favicon的href属性：

<link rel="shortcut icon" href="{{ url_for('static', filename='F1Logo.svg') }}">

验证要点 #

• 确保F1Logo.svg文件确实存放在项目根目录下的static文件夹中（Flask默认静态资源目录为static）。
• 重启Flask应用，刷新所有页面即可看到Logo和Favicon正常显示。

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