flask-9加载静态文件_flask css img-优快云博客

本文链接：https://blog.youkuaiyun.com/legend818/article/details/103662008

本文详细介绍了在Flask框架中如何加载和使用静态资源，如CSS、JS和图片文件。通过url_for函数，可以实现静态文件的正确引用，确保网页元素如样式、脚本和图像能够被正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flask当中一些静态文件如何加载呢例如css、images、js

这里也使用到了url_for

在static目录下新建一个css文件目录

然后再新建css文件index.css

目录如下：（images，js创建操作同css）

link-index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
</head>
<body>
<a href="{{ url_for('linklogin') }}">登录</a>
<img src="{{ url_for('static', filename='images/csdn-logo_.png') }}" alt="">
</body>
</html>

link_login.html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>这是登录页面</h1>
</body>
</html>

link-index.py 代码如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def link_index():
    return render_template('link_index.html')

@app.route('/link_login/')
def linklogin():
    return render_template('link_login.html')

if __name__ == '__main__':
    app.run(debug=True)

运行界面如下：