使用Flask实现CSS背景图片

Question

我已经阅读了其他关于在Flask中显示背景图像的问题，但是没有任何建议的解决方案适用于我，我得到了404错误（127.0.0.1 - - [22/Feb/2018 15:13:33] "GET /img/showcase.jpeg HTTP/1.1" 404 -）。我想设置为背景的jpeg图像位于静态文件夹中，名为showcase.jpeg。这是我的代码。有什么建议吗？这是我的style.css的HTML链接：

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

CSS文件：

#showcase{
  background-image: url({{ url_for ('static', filename = 'showcase.jpeg') }});
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  font-weight: bold;
}

Folders

- Parth Patel

---

其中一个建议的答案是将静态文件夹放在 Flask 文件旁边，但那并不起作用。 - Parth Patel

你能展示所有文件和目录树结构吗？那会很有帮助的。 - Robert Moore

你是否检查了你的检查器工具，看看Jinja是否在CSS层渲染URL？ - Oliver Too Eh

Answer 1

CSS文件被视为静态文件，因此您不应在CSS中使用url_for方法。

如果您的文件结构是：

static
  -img
  -css

使用 background-image: url(../img/showcase.jpeg)

相关的SO

- Frish

---

所以我将图像添加到名为静态内部的img文件夹中，但是仍然出现相同的错误。我不确定该如何继续。 - Parth Patel

请在您的初始问题中提供更多信息，我们会看一下 :) - Frish

尝试使用静态/img，或许可以。 - Frish

"url( img/showcase.jpeg)" 是错误的，应该是 "url(../img/showcase.jpeg)"。 - Paras Gupta

@ParasGupta 已经修复了.. 你是正确的.. 假设你的 css 文件在 ./css 中，图片在 ./img/(*.jpg) 中 - 这正是答案所做的。 - B. Shea

Answer 2

这是我的目录树结构： 目录树结构 并且你可以像这样编写背景图片：

background-image: url(../img/nodejsEventLoop.png);

- MeloGuo

Answer 3

执行：

background-image: url('/static/showcase.jpeg');

它对我起作用了。

- Sailer

Answer 4

做：

background-image: url('../images/pic.png');

其中 static->images->pic.png。

- Nikita