Flask项目中CSS无法加载且命令行返回404错误如何解决？

静态资源引用路径和Flask配置的静态目录映射规则不匹配，导致服务无法定位到资源返回404：

• 你在Flask初始化时指定static_folder为D:/User/Documents/GitHub/CSC 172/Dandyhacks2021/Flask/static，Flask默认会将/static/的URL前缀映射到该目录，你HTML中写死的/Flask/static/xxx路径不在服务的路由规则中，无法匹配到对应文件
• 图片、背景图的相对路径引用也不符合静态资源映射规则，同样会返回404
• 你原HTML中的<body div style>存在语法错误，多写了多余的div字段

1. 先整理static目录结构，按类型划分静态资源：
   • 在static目录下新建css文件夹，将homepagestyle.css放入该文件夹
   • 在static目录下新建images文件夹，将所有图片（包括Léelo.png、background.png）放入该文件夹
2. 不要在模板中写死静态资源路径，改用Flask内置的url_for函数自动生成正确的资源路径，修改对应HTML代码：
   替换CSS引用代码：

   <link rel="stylesheet" href="{{ url_for('static', filename='css/homepagestyle.css') }}">
   

   替换logo图片代码：

   <img id="logo" src="{{ url_for('static', filename='images/Léelo.png') }}" alt="Léelo"><br>
   

   替换body标签代码（同时修正语法错误）：

   <body style="background-image: url('{{ url_for('static', filename='images/background.png') }}');">
   

3. 重新启动Flask服务即可正常加载所有静态资源。

补充优化 #

页面内跳转的链接也建议用url_for生成，比如跳转到首页的链接改为：

<li><a href="{{ url_for('home') }}" target="blank">HOME</a></li>

避免后续调整路由规则后跳转失效。

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