静态文件
静态文件（static files）和模板概念相反，指的是内容不需要动态生成的文件，比如图片、CSS 文件和 JavaScript 脚本等。
在 Flask 中，需要创建一个 static 目录来保存静态文件，它应该和程序模块、templates 在同一目录层级。
生成静态文件 URL
在 HTML 文件里，引入这些静态文件需要给出资源所在的 URL。为了更加灵活，这些文件的 URL 可以通过 url_for() 函数来生成。
对于静态文件，url_for() 中需要传入的路由是 static，同时使用 filename 参数来传入相对于 static 文件夹的文件路径。
假如在 static 文件夹的根目录下面放了一个 logo.jpg 文件，可以这样来获取图片：
<img src="{{ url_for('static', filename='pic.jpg') }}">
花括号部分的调用会返回 /static/pic.jpg。
这里要注意，在 Python 脚本里，url_for() 函数需要从 flask 包中导入，而在模板中则可以直接使用就可以，因为 Flask 把一些常用的函数和对象添加到了模板上下文里。
添加图标
图标（favourite icon） 是显示在标签页和书签栏的网站头像。需要准备一个 ICO、PNG 或 GIF 格式的图片，大小一般为 16×16、32×32、48×48 或 64×64 像素。把这个图片放到 static 目录下，然后在 HTML 模板里引入它。
创建 flask_static.py
from flask import Flask, render_template
# 创建 Flask 应用程序实例
app = Flask(__name__)
# 定义路由和视图函数
@app.route("/")
def show_static():
return render_template("static.html")
# 运行应用程序
if __name__ == '__main__':
app.run(debug=True, port=5050)
在 templates 目录下创建 static.html
<!DOCTYPE html>
<html lang="en">
<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"/>
<title>静态文件</title>
<link rel="icon" href="{{ url_for('static', filename='logo.jpg') }}">
</head>
<body>
<h1>静态文件</h1>
</body>
</html>
<script type="text/javascript"></script>
启动服务，浏览器中访问 http://127.0.0.1:5050/，即可在浏览器标签页上看到这个图标。
添加图片
为了让页面不那么单调，可以在页面中添加图片。
可以在 static 目录下面创建一个子文件夹 images，把图片都放到这个文件夹里。
创建子文件夹并不是必须的，只是为了更好的组织同类文件。同样的，如果有多个 CSS 文件，也可以创建一个 css 文件夹来组织他们。
下面在 static.html 中添加图片，注意文件路径要写正确。
<!DOCTYPE html>
<html lang="en">
<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"/>
<title>静态文件</title>
<link rel="icon" href="{{ url_for('static', filename='logo.jpg') }}">
</head>
<body>
<h1>
<img alt="branch" src="{{ url_for('static', filename='images/branch.gif') }}">
霍格沃兹
</h1>
<div>
<img alt="Gryffindor" src="{{ url_for('static', filename='images/Gryffindor.png') }}">
<img alt="hogwarts" src="{{ url_for('static', filename='images/hogwarts.jpg') }}">
</div>
</body>
</html>
<script type="text/javascript"></script>
保存文件，刷新浏览器页面即可看到页面中展示了对应的图片。
添加 CSS 文件
虽然添加了图片，但是页面排版还不好看，因为现在还没有添加 CSS 定义。
下面在 static 目录下创建一个 CSS 文件 style.css。
body {
margin: auto;
max-width: 800px;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
}
/* 霍格沃兹学院 */
.hogwarts {
display: auto;
margin: 0 auto;
height: 300px;
}
/* 小图片 */
.pic {
width: 100px;
}
接着在 static.html 页面的 标签内引入这个 CSS 文件。
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
最后要为对应的元素设置 class 属性值，以便和对应的 CSS 定义关联起来：
templates/index.html：添加 class 属性
<body>
<h1>
<img alt="branch" class="pic" src="{{ url_for('static', filename='images/branch.gif') }}">
霍格沃兹
</h1>
<div>
<img alt="Gryffindor" class="pic" src="{{ url_for('static', filename='images/Gryffindor.png') }}">
<img alt="hogwarts" class="hogwarts" src="{{ url_for('static', filename='images/hogwarts.jpg') }}">
</div>
</body>
刷新浏览器，可以看到页面中的图片按照 CSS 样式的定义进行展示。
标签：10,文件,静态,添加,static,CSS,图片 From： https://www.cnblogs.com/csfsz/p/17842419.html