带URL变量的Flask页面CSS失效问题求助

问题根源：你的base.html中静态资源使用了相对路径（static\css\style.css），当页面URL为多级路径（如/sendKontakt/xxx/xxx/xxx）时，浏览器会错误地从当前URL层级下查找静态资源（即尝试访问/sendKontakt/xxx/xxx/static/css/style.css），导致无法加载正确的CSS文件。

下面是两种可行的解决方法：

方法1：使用Flask的url_for生成静态资源路径（推荐） #

这是Flask官方推荐的方式，能自动适配应用的根路径，避免部署场景变化带来的路径问题。修改base.html中的资源引用：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" type="text/css">
    <link rel = "icon" href = "{{ url_for('static', filename='img/smallicon.png') }}" type = "image/x-icon">
    <title>{% block title %}{% endblock %}</title>
</head>

注意：路径中的反斜杠\改为正斜杠/，这是Web开发中的标准格式。

方法2：使用绝对路径 #

在静态资源路径前添加/，强制浏览器从网站根目录开始查找资源：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/style.css" type="text/css">
    <link rel = "icon" href = "/static/img/smallicon.png" type = "image/x-icon">
    <title>{% block title %}{% endblock %}</title>
</head>

这种方法简单直接，但如果你的应用部署在子路径下（如http://example.com/my-flask-app/），需要手动调整路径前缀，灵活性不如方法1。

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