【Jinja2】静态文件的加载（九）

今天自洽了吗

已于 2023-03-24 11:07:38 修改

阅读量694

点赞数

分类专栏： Flask 文章标签： python flask

于 2022-12-05 12:29:23 首次发布

本文链接：https://blog.csdn.net/hold_on_qlc/article/details/128179957

版权

Flask 专栏收录该内容

13 篇文章 17 订阅

订阅专栏

一个网页中，除了HTML代码之外，还要CSS、JavaScript和图片文件才能更加美观和实用。静态文件默认是存放到当前项目的static文件夹中，如果想要修改静态文件存放路径，可以在创建Flask对象的时候，设置static_folder参数，例如：

app = Flask(__name__,static_folder='C:\static')

一、jinja2中加载静态文件通过 url_for( ) 函数来实现

1. 在HTML文件中加载图片

<img src="{{ url_for('static',filename='images/ironman.jpg') }}" alt="">

2. 在HTML文件中加载css文件

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

3. 在HTML文件中加载js文件

<script src="{{ url_for('static',filename='js/my.js') }}"></script>

二、项目演示

08加载静态资源.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/static') # 访问这个URL的时候会自动调用下面的函数
def static_demo():
    return render_template("static.html")

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

static.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/style.css') }}">
    <script src="{{ url_for('static',filename='js/my.js') }}"></script>
</head>
<body>
{#{{  }} 表示里面是被调用的函数或者变量#}
<img src="{{ url_for('static',filename='images/ironman.jpg') }}" alt="">

</body>
</html>

style.css

/*这里我想给展示的网页 设置一个其他颜色的背景*/
body{
    background-color: pink;
}

my.js

alert("我在my.js文件中执行！")

启动人口程序：08加载静态资源.py，地址栏输入http://127.0.0.1:5000/static

今天自洽了吗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Jinja2】静态文件的加载（九）

一个网页中，除了HTML代码之外，还要CSS、JavaScript和图片文件才能更加美观和实用。静态文件默认是存放到当前项目的static文件夹中，如果想要修改静态文件存放路径，可以在创建Flask对象的时候，设置static_folder参数，例如：
复制链接

扫一扫