无法在我的 Flask 应用程序中通过 url_for 使用静态文件答案

【问题标题】：Can't use static files via url_for in my Flask app无法在我的 Flask 应用程序中通过 url_for 使用静态文件
【发布时间】：2019-12-29 00:01:09
【问题描述】：

我通过 YouTube 教程学习 Flask。并且每次（现在是我的第 3 个 Flask 系列）我都有同样的问题 - 当我像这样使用 url_for 时，静态文件夹中的文件不会做他们应该做的事情：。

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

我的意思是 .js 没有做任何事情，.css 不会改变元素的样式，图像不会出现在页面上。并且调试器没有显示任何错误。但是当我使用 url_for 将用户重定向到另一条路线时 - 它完美地工作！所以我不知道如何解决这个问题。我用的是macbook，可能是访问本地文件有问题？

附：我没有显示任何代码，因为它不是我的代码中的错字。即使我从导师的github复制过去的代码，我仍然有同样的问题。

【问题讨论】：

您是否在应用实例化时指定了静态文件夹？例如。 app = Flask(__name__, static_folder='static')?
请edit 显示您的文件和文件夹目录结构。也许你把你的 js 和 css 文件放在了错误的文件夹中。 Flask 期望它们位于特定位置，除非您设置了 static_folder 参数。
另外，我建议阅读有关使用 Flask 提供静态文件的官方文档，例如：exploreflask.com/en/latest/static.html。我不反对 Youtube 教程，但它们往往不会显示应用程序的完整细节。
日志是否显示正在请求 .js 和 .css 文件？如果不是，则问题出在模板中的 HTML 中。
@bernie 没有。我认为我传递给 url_for 的第一个属性是静态文件夹的名称

标签： python flask

【解决方案1】：

url_for 的第一个参数是端点名称，'static' 是一个特殊的端点名称，用于引用您的应用程序的Static Files：

只需在您的包裹中或您的旁边创建一个名为 static 的文件夹模块，它将在应用程序的/static 上提供。

要为静态文件生成 URL，请使用特殊的“静态”端点名称：
url_for('static', filename='style.css')
该文件必须以static/style.css 的形式存储在文件系统中。

所以，鉴于此：

<link ... href="{{ url_for('static', filename='styles.css') }}">

假设您像这样创建 Flask 实例：

app = Flask(__name__)

确保您的应用文件/文件夹结构如下：

.
├── app.py
├── static
│   └── styles.css
└── templates
    └── app.html

如果您要像这样组织 JS 和 CSS 文件：

.
├── app.py
├── static
│   ├── css
│   │   └── styles.css
│   └── js
│       └── app.js
└── templates
    └── app.html

然后您必须像这样将参数适当地更改为url_for：

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

如果您将 static 文件夹命名为其他名称（例如“assets”），则必须在 creating the Flask instance 时为 static_folder 参数指定新名称。

app = Flask(__name__,
            static_folder="assets")

您还可以检查 Flask 调试器日志是否正确访问了静态文件：

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [29/Dec/2019 20:30:44] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Dec/2019 20:30:44] "GET /static/css/styles.css HTTP/1.1" 200 -

或者您的浏览器的调试器/检查工具确实在正确下载文件：

【讨论】：