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

Question

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

3

我无法让flask运行我的css和js文件。它只是打开一个页面，其中所有图片都丢失了，所有文本字段、按钮等都分散在各个地方。所以我发现相关文件需要在static文件夹中，并且路径需要相应地进行调整，例如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代码中的几行：

这是从上述路径的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()

当我运行 Flask 后，输出如下：

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文件工作得很好。

- artre

4个回答

2

您需要将子目录 css_image 添加到模板中 url_for 函数的 filename 参数中：

{{ url_for('static', filename='css_image/script.js')}}

侧面注释：您似乎在模板示例的第二行完成了此操作。

<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">

然而，控制台中相应的行如下所示：

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /css_image/img1.png HTTP/1.1" 404 -

这个路径应该生成为/static/css_image/img1.png，并且能够正常工作。我猜你可能在尝试修复它时调整了目录结构，所以请仔细检查目录结构和代码是否正确。

- v25

谢谢。我认为那是一个复制粘贴错误。所有文件都在正确的文件夹中，HTML 文件中的路径也都是正确的。我刚刚再次检查了一遍。 - artre

1

我找到了解决方案：只需在文件夹前加上 "/"，例如 '/css_image/asdf.css' 而不是 'css_image/asdf.css'。

- Guillermo Arce

1

好的，最终我解决了它。虽然这是一个平凡的解决方案，但对我来说并不完全合理，但它起作用了。所以基本上我将.css和.js文件移出“css_image”文件夹，并在HTML文件中更改它们的路径：

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

到

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='asdf.css')}}">
<script  src="{{ url_for('static', filename='script.js')}}" data-turbolinks-track="reload"></script>

奇怪的是，我不需要将图像文件移出css_image文件夹，因为Flask可以轻松地提供它们。

- artre

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- qmeeus · Accepted Answer

当您将HTML指向静态文件时，您必须提供从静态目录根目录开始的路径:

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

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

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

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