Как установить фоновое изображение для компонента в Angular?

Question

Поэтому я хочу, чтобы у моего компонента, расположенного в «src / app / login / login.component. html», было фоновое изображение с именем «office.jpg», расположенное в папке с изображениями «src / images / office». jpg ”.

Итак, код в моем файле« login.component.html »выглядит следующим образом, который я обнаружил ранее после быстрого поиска в Google:

<div [style.background]="'url(../images/' + office.jpg + ')'">
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let user of users">{{ user.FIRSTNAME }}</li>
    </ul>    
</div>

Однако я получаю следующую ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'jpg' из неопределенного

Я не понимаю, где я ошибся. Как добавить изображение в качестве фона?

Answer 1

Синтаксис, который вы используете для того, когда имя изображения является переменной. Поскольку имя изображения является константой, в этом случае вы можете использовать вот так css

<div [style.background]="'url(../images/office.jpg)'">
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let user of users">{{ user.FIRSTNAME }}</li>
    </ul>    
</div>