Почему не отображаются картинки?

Question

settigs.py:

STATIC_URL = '/static/'
STATIC_ROOT = ''
STATICFILES_DIRS = (
    os.path.join(_PATH, 'static'),
)
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

Urls.py:

app_name = 'history'
urlpatterns = [
        ...
        path('main/', views.main ,name = 'main'),

]

views.py:

def main(request):
    return render(request, 'site/index.html')

index.html:

{% load static %}
    <!DOCTYPE html>
    <html lang="ru">
    <head>
            <link rel="stylesheet" href='style.css'>
            <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap&subset=cyrillic" rel="stylesheet">
            <title>Дорогами нашей победы!</title>
            <link rel="stylesheet" href="style.css"type="text/css">
    </head>

    <body>
        <style>
            body{
        margin: 0;
        bottom: 0;

    }
    a{
        text-decoration: none;

    }
    h1,h2,h3,h4,h5,h6{
        padding: 0;
        bottom: 0;
        margin-top: 0;
    }
    .header{
        height: 150px;
        width: 100%;
        background:url(img/2x/1.png)center no-repeat;
      font-size: 50px;
      padding: 0;
        bottom: 0;
        background-size: 100%;


    }
    .img-block{
      width: 1349px;
      height: 843px;
      position: relative;
      left: 0;
      right: 0;
      margin: 0 auto;
      margin-bottom: 50px;
    }

    .img-block__text {
      position: absolute;
      background-color: rgba(0,0,0,.5);
      display: flex;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 50px;
      opacity: 0;
      -webkit-transition: all .5s time;
      -o-transition: all .5s time;
      transition: all .5s time;
    }
    .img-block:hover .img-block__text{
        opacity: 1;
    }
    .links{
      color: #565F5C;
      width: 100%;
      height: 300px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 45px;
    }
    button{
    width: 800px;
    height: 60px;
    font-size: 50px;
    }
        </style>
        <div class="header">
            <h1 align="center">Стоит помнить!<h1>
        </div>
        <div class="links">
        <button><a href="#">Написать свою историю</a></button>
        <button><a href="#">Вспомним всех поимённо</a></button>
        <button><a href="#">Историческая справка</a></button>
      </div>
        <div class="img-block">
          <img src="{%static 'img/10.png' %}">
          <span class="img-block__text">
          У каждого из нас есть родственники, которые участвовали в Великой Отечественной войне.В канун семьдесят пятой годовщины, как никогда, стоит рассказать о подвиге, совершённом вашими предками
          </span><br>
      </div>   


    </body>  
    </html>

Answer 1

подключаются стили, которые лежат в папке статик в корне проекта, где файл manage.py и внутри папки css

<link rel="stylesheet" href="{%static 'css/style.css' %}" type="text/css">

статические изображения закружаются так на странице

 <img src="{%static 'название_картинки.расширение ' %}" class="logo">

БЛОГ НА HUSL

Почему не отображаются картинки?

Ответы (1 шт):