Как связать изображение героя в css для приложения фляги

Question

Я пытаюсь добавить изображение героя на страницу приложения фляги.Ниже приведена структура каталогов для моего проекта фляги.

-static
 |--css_files
   |--my.css
 |--images
   |--img.jpg
-templates
 |--layout.html

Теперь, чтобы добавить изображение героя, у меня есть следующий код HTML в layout.html -

<div class="hero-image">
    <div class="hero-text">
        <h1>My Heading</h1>
        <p>Some paragraph</p>
    </div>
</div>

Чтобы добавить стиль, я использую следующий CSS код в my.css -

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ url_for('static',filename='images/img.jpg') }});
    /* Set a specific height */
    height: 50%;
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

Но я могу видеть только hero-text, а не изображение.Как я могу связать этот img.jpg с my.css?

Я также попробовал абсолютный путь, backgrouond: url('/static/images/img.jpg'), но не сработал.

Answer 1

Можно было бы заменить часть абсолютного пути на функцию url_for, например:

background:url({{ url_for('static', filename='images/img.jpg') }})

Функция преобразует ее в абсолютный путь для вас.

Answer 2

Краткое руководство по путям

Существует три способа получить доступ к вашему файлу.Каждый из них зависит от местоположения вашего файла и вашей точки вызова (вашего html-файла).

Abbr: Папка, содержащая файл = FCF.Точка вызова (html-файл) = CP

url('pathtofile/file.jpg') /* FCF is located in the same folder as your CP


url('../pathtofile/file.jpg') /* FCF is located in a folder containing the folder to your CP. Your path goes ONE step backwards and then forward.


url('/pathtofile/file.jpg') /* This starts the search in the absolute root-folder

Для настройки можно использовать url('../pathtofile/file.jpg') и url('/pathtofile/file.jpg').

Answer 3

Изменить URL-адрес, как это

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