Правильный способ использования фонового изображения с локальным файлом html / css - PullRequest
1 голос
/ 17 марта 2019

Я пытаюсь добавить фоновое изображение к простому сайту, который пытаюсь создать, но получаю ошибку 404 на изображении, и нет фона, когда я пытаюсь использовать локальный файл jpg, который я скачал.Однако, когда я использую ссылку из изображения в Интернете, изображение отображается правильно.

Вот моя файловая структура для кода:

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>

Я пробовал все эти варианты в URL, но ни один из них не работал для отображения фона:

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);

И в значительной степени любая другая комбинация этого пути к файлу и цитатыопции.Я даже добавил путь к файлу, начиная с моего корневого каталога, файл: ///Users/kyle/Desktop/programming/website/project/templates/img/image.jpg.Это изображение будет отображаться, если я скопирую и вставлю его в свой браузер, но не добавлю его в поле url фонового изображения.

Сохраняя весь код одинаковым, любое изображение, ссылку на который я беру из Google, работает, но я хотел бы, чтобы локальное изображение работало, если это возможно.

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Попробуйте использовать шаблонную функцию колбы с функцией url_for:

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

Читать это сообщение для ссылки на папки.

0 голосов
/ 17 марта 2019

Попробуйте без косой черты

background-image: url('img/image.jpg');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...