Question

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

我尝试在浏览器中输入路径，但效果很好

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

我希望对此有一个简单的解决方法，尤其是因为我是新手。谢谢！

Answer 1

在您的html文件中，您应该在标题中添加以下内容：

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

...，只要您的静态目录名为static。在我的多个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>

无法正确提供烧瓶中的静态文件

1 个答案: