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

Question

Я пытаюсь установить фоновое изображение моего angular веб-сайта из папки ресурсов. Вот мой код:

app.component. html

<div [style.background]="/assets/burn_calories.jpg"></div>
  <ul>
    <li><a href="default.asp">HOME</a></li>
    <li><a href="news.asp">PLAN</a></li>
    <li><a href="contact.asp">HISTORY</a></li>
    <li style="float:right"><a href="about.asp">LOGIN</a></li>
  </ul>

Изображение находится в папке ресурсов

app.component. css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  }

  li {
    float: left;
    border-right: 1px solid #bbb;
  }

  li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Change the link color to #111 (black) on hover */
  li a:hover {
    background-color: #111;
  }

  .active {
    background-color: #4CAF50;
  }

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

Uncaught Error: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: неожиданный токен / в столбце 1 в [/assets/burn_calories.jpg] в ng: /// AppModule / AppComponent. html@0: 25 ("] /assets/burn_calories.jpg">

Answer 1

Если вы устанавливаете литеральное значение с помощью скобочных обозначений, вам нужно установить буквальное значение, как если бы вы писали javascript - с помощью строкового обозначения.

<div [style.background]="'url(/assets/burn_calories.jpg)'"></div>

Если вы этого не сделаете используйте строковую нотацию, вы говорите Angular, что она должна вызвать функцию с именем url, передавая аргумент /assets/burn_calories.jpg, который не собирается компилироваться.

DEMO: https://stackblitz.com/edit/angular-uk5k5q