时间戳

首页 > 解决方案 > 如何让 Flask 识别静态文件夹中的 CSS 和 JS 文件？

javascript - 如何让 Flask 识别静态文件夹中的 CSS 和 JS 文件？

问题描述

我无法让烧瓶运行我的 css 和 js 文件。它只是打开一个页面，其中所有图像都丢失了，所有文本字段和按钮等都到处都是。所以我发现相关文件需要位于静态文件夹中，并且必须相应地调整路径，例如CSS Problems with Flask Web App或External JavaScript file is not getting added when running on Flask。我实现了这一点。但这并没有真正帮助。显然这是一个普遍的问题。我在stackoverflow上尝试了其他一些建议/解决方案，主要集中在语法和括号等，但没有任何帮助。所以我的文件夹结构是这样的：


  /myproject
      /static
         /css_image
            script.js
            img1.png
            asdf.css
      /templates
         index.html
      app.py

以下是上述路径的 HTML 代码中的几行： 

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script>

我的 python-flask 代码如下所示：

from flask import Flask, url_for, render_template

app = Flask(__name__)


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

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

运行烧瓶后，我在输出中得到以下信息：

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/img1.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/asdf.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/script.js HTTP/1.1" 404 -

我还应该补充一点，当我通过单击文件直接打开它时，html 文件工作得很好。

标签： javascriptpythonhtmlcssflask

解决方案

当您将 html 指向静态文件时，您必须提供静态目录根目录的路径：

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

话虽如此，这不是您唯一的问题，因为找不到一些具有正确路径的静态文件。

当您在创建应用程序时提供静态文件的路径时会发生什么？IE：

app = Flask(__name__,
            static_folder='static',
            template_folder='templates')

[编辑]：你没有提到两件事：你的 python 文件的名称是什么，它在你的结构中的什么位置？我复制粘贴了您的代码，它工作正常，如下日志所示：

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/asdf.css HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/script.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/img1.png HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /favicon.ico HTTP/1.1" 404 -

目录结构：

app.py
static/
    css_image/
        asdf.css  
        img1.png
        script.js
templates/
    index.html

推荐阅读