无法在CSS（烧瓶模板）中应用背景图片

Question

我想在内部CSS中应用背景图片。我正在使用烧瓶模板。这是我的目录

src - templates - image - img.jpg
src- templates - upload.html

我想将背景图片应用于upload.html。但出现404错误。有人可以帮我吗？

我的代码：

background-image: url("/image/img.jpg");

错误消息：

  

获取/image/img.jpg HTTP / 1.1 404

Answer 1

我认为您输入的路径错误，这就是为什么您会收到404错误。您可以使用以下代码。

background-image: url{"image/img.jpg"};

Answer 2

可能存在多个问题，例如：

1. 错误的目录URL：尝试指定整个URL-代替"/image/img.jpg"尝试"/templates/image/img.jpg"。

2. 拼写错误的目录名-正确检查。

3. 请确保自己指定的图像格式正确（.jpg）。

Answer 3

在示例和教程中将看到完成此操作的（Flask）标准方法是将静态文件放在项目根目录的static文件夹中。假设您的CSS也在static中，

background-image: url('/static/img.jpg');

做您想要的。但是，如果您要在模板中嵌入样式，

background-image: url({{ url_for('static', filename='img.jpg') }});

是首选，尽管前者可以正常工作。

如果事情变得更加复杂，并且您开始使用蓝图，请查阅文档。