Question

我正在尝试将背景图像添加到我要制作的简单站点中，但是当我尝试使用我下载的本地jpg文件时，图像上出现404错误且没有背景。但是，当我使用Web上图像的链接时，图像会正确显示。

这是我的代码文件结构：

website/
     run.py
     project/
        __init__.py
        routes/
             home.py
        templates/
             layout.html
             homepage.html
             img/
                image.jpg

这是我试图运行的代码，以使图像在 homepage.html 中显示为背景：

  <head>
    <title>Welcome!</title>

    <style type="text/css">
      body{
       background-image: url('/img/image.jpg');
       min-height: 100%;
       background-size:100%
      }
    </style>
  </head>

我已经尝试了所有这些变体，但没有一个能显示背景：

background-image: url('/img/image.jpg');
background-image: url("/img/image.jpg");
background-image: url(/img/image.jpg);
background-image: url('/website/project/templates/img/image.jpg');
background-image: url("/website/project/templates/img/image.jpg");
background-image: url(/website/project/templates/img/image.jpg);
background-image: url('project/templates/img/image.jpg');
background-image: url("project/templates/img/image.jpg");
background-image: url(/project/templates/img/image.jpg);

该文件路径和引号选项的几乎所有其他组合。我什至从我的根目录开始添加了文件路径，即file：///Users/kyle/Desktop/programming/website/project/templates/img/image.jpg。如果我将其复制并粘贴到浏览器中，则会显示该图像，但是如果将其放在背景图像的url字段中，则不会显示该图像。

保持所有代码相同，但是我从Google那里获取其链接的任何图像都可以工作，但是如果可能的话，我希望本地图像可以工作。

Answer 1

尝试不加斜杠

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

Answer 2

尝试将flask的模板功能与url_for函数一起使用：

background-image: {{ url_for(image.jpg) }}

阅读this帖子以引用文件夹。

使用本地文件html / css的背景图像的正确方法

2 个答案: