Flask带参数路由访问时静态资源Assets返回404错误如何解决

问题根因 #

你模板中所有静态资源使用的是相对路径，路径解析规则由浏览器当前访问的页面路径决定：

• 访问/watch时，页面路径位于站点根层级，浏览器会将assets/xxx解析为/assets/xxx，和你配置的static_folder="templates/assets"路径匹配，因此加载正常
• 访问/watch/Coreyms时，页面路径位于/watch/层级，浏览器会将assets/xxx解析为/watch/assets/xxx，这个路径不存在，因此全部返回404错误

解决方案 #

方案1（推荐，Flask官方最佳实践） #

将模板中所有静态资源路径替换为Flask提供的url_for('static', filename='xxx')动态生成方式，示例如下：
原来的写法：

<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src="assets/bootstrap/js/bootstrap.min.js"></script>

替换为：

<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>

将所有CSS、JS、图片等静态资源的href/src属性都按上述规则修改即可。该方式的优势是后续如果修改static_folder配置，无需调整模板内的资源路径。

方案2（快速修复） #

在HTML的<head>标签内最顶部添加<base href="/">标签，强制浏览器所有相对路径都以站点根路径为基准拼接，无需修改其他资源路径：

<head>
    <base href="/">
    <meta charset="utf-8">
    <!-- 其余原有内容 -->
</head>

说明 #

你之前将assets目录移动到static目录下、新增watch目录的操作没有生效，是因为没有解决路径解析的根问题，浏览器仍然会将资源路径拼接在/watch/层级下，因此无法命中正确的资源地址。

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