首页 > 解决方案 > 无法在烧瓶中正确提供静态文件

问题描述

我正在尝试使用烧瓶将静态图像提供给 css 文件。我render_template()用来获取 html 文件,并且我的 css 和 javascript 有一个静态目录。我的另一个图像正在加载,但我从 css 文件中引用的图像不起作用,我从烧瓶终端获取了他的图像:GET /static/static/res/typewriter.jpg HTTP/1.1" 404

我尝试在浏览器中输入路径,它工作正常

这就是我引用图像的方式,因为 CSS 文件已经在静态目录中。background-image: url("/res/typewriter.jpg");

我希望有一个简单的解决方案,特别是因为我是这个东西的新手。谢谢!

标签: pythonhtmlflask

解决方案


在您的 html 文件中,您应该在标题中包含以下内容:

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

...只要您的静态目录被命名为静态。在我的几个 Flask 应用程序中,我正在导入 Bootstrap css,如下所示:

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

确保您在浏览器中访问http://127.0.0.1:5000 (除非您更改了默认值)。

这里还有一个随机示例,说明我如何从静态目录中提供图像:

h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>

推荐阅读