Flask带<user_id>路径参数的分层页面静态图片无法显示问题求助

问题根因 #

你当前使用相对路径引用静态资源，当路由增加<user_id>层级后，浏览器会基于当前页面的路径/adminPortal/xxx解析相对路径，实际请求的静态资源地址变为/adminPortal/static/xxx，与你的真实静态资源存放路径不匹配，因此加载失败。网络图片使用完整绝对路径，不受页面层级影响，所以可以正常加载。

解决方案 #

方案1：使用Flask内置url_for函数生成静态资源地址（推荐） #

这是Flask官方推荐的静态资源引用方式，不受路由层级影响，修改模板内的图片引用代码即可：

<!-- 替换前 -->
<img src="{{ 'static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px>
<img src="{{'static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px>
<img src="{{'static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">

<!-- 替换后 -->
<img src="{{ url_for('static', filename='oldLady.jpg') }}" alt="Profile Pic Of User" height=200px>
<img src="{{ url_for('static', filename=avatar + '.png') }}" alt="Picture of Avatar" height=200px>
<img src="{{ url_for('static', filename='Amy.png') }}?{{ time }}" width="240" usemap="#amymap" class="unselectclass">

不需要修改现有带<user_id>参数的路由代码，替换完成后即可正常加载静态资源。

方案2：将静态资源路径改为根路径绝对路径 #

如果不想调整模板的变量写法，直接在所有静态资源路径开头添加斜杠/即可，强制浏览器从网站根目录请求资源：

<img src="{{ '/static/oldLady.jpg' }}" alt="Profile Pic Of User" height=200px>
<img src="{{'/static/' + avatar + '.png'}}" alt="Picture of Avatar" height=200px>
<img src="{{'/static/Amy.png?' + time}}" width="240" usemap="#amymap" class="unselectclass">

内容的提问来源于stack exchange，提问作者Matthew Van Ginneken