在使用 Flask 后端时，如何将图像和资产与 HTML 一起使用？

Question

我正在尝试制作一个 TicTacToe 网络应用程序，其中 AI 扮演玩家 2。为此，我用 Python 编写了游戏和 AI 代码，编写了 html/javascript 前端，并使用了烧瓶服务器。在 html 中，我有 img 标签和资产，例如（这些以传统方式嵌入到 html 文件中）：

<img id="pic" src="assets/images/hil.jpg" class="X">
or
<audio src="assets/audio/smw_coin.wav" id="marioStart" preload="auto"></audio>

但是，我收到此表单的错误。

127.0.0.1 - - [11/Feb/2016 23:52:22] “GET /assets/audio/smb_pipe.wav HTTP/1.1”404 -

127.0.0.1 - - [11/Feb/2016 23:52:22] "GET /assets/js/jquery-1.11.3.js HTTP/1.1" 404 -

Flask 似乎将此解释为域名，而不是检查资产文件夹。有谁知道如何让 Flask 将 src 请求解释为 Flask 模板文件夹中的目录？

PS。这也是一个问题，因为它阻止我在我的 html 文件中包含 JQuery。

Answer 1

你想使用url_for。

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

默认情况下，您最终会得到一个类似于 /static/images/hil.jpg 的 URL，该 URL 来自您的 static 文件夹。如果你想保留现有的 URL，你必须告诉 Flask 为静态资源使用不同的 URL 路径。

app = Flask(__name__, static_url_path='/assets')

这将为您提供一个类似于 /assets/images/hil.jpg' that is served up from yourstatic` 文件夹的 URL。如果您已经为文件夹 assets 命名并且不想重命名它，您也可以告诉 Flask 在不同的文件夹中查找静态资产。

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

这将为您提供一个类似于 /assets/images/hil.jpg 的 URL，该 URL 来自您的 assets 文件夹。在这种情况下，您不需要同时指定两个参数，因为 static_url_path 默认使用 static_folder。