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

How do you use images and assets with HTML while using a Flask backend?

本文关键字：一起 图像 HTML Flask 后端      更新时间：2023-09-26

我正在尝试制作一个 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 模板文件夹中的目录？

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

你想使用 url_for .

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

默认情况下，您最终会得到一个看起来像从static文件夹中提供的/static/images/hil.jpg的 URL。如果你想保留你拥有的URL，你必须告诉Flask对静态资产使用不同的URL路径。

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

这将为您提供一个看起来像静态文件夹/assets/images/hil.jpg' that is served up from your URL。如果您已经命名了文件夹资产，并且不想重命名它，则可以告诉 Flask 也在其他文件夹中查找静态资产。

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

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

相关文章：