Показать изображение в ngFor в Ionic

Question

У меня очень похожая проблема, как описано здесь, но, к сожалению, ни одно из решений, представленных в ответах, не работает для меня.Я пытаюсь отобразить изображение внутри ngFor в одном из моих ионических представлений.

Вот код:

  <div
    class="activities__elem-img"
    [ngStyle]="{
      'background-image':'url(http://mybackend.com/' + item.node.image ? item.node.image.key : 'notfound' + ')'
    }"
  ></div> 

К сожалению, стиль не отображается в DOM.Однако этот код работает с другими свойствами CSS, такими как background-size.Как я могу отобразить изображение?

Все, что я вижу в своем HTML-коде, это: ng-reflect-ng-style="[object Object]".Я ожидаю, что увижу URL, ведущий к моему изображению.

РЕДАКТИРОВАТЬ: работает, как предложено в комментарии, но не работает, когда я помещаю его в функцию:

[ngStyle]="{
  'background-size': 'contain',
  'background-image': getImageUrl(item)
}

И моя функция:

getImageUrl({ node }) {
  const imageUrl = `http://my.backend.com/${node.image ? node.image.key : "notfound"}`;
  return `url ( '${imageUrl}' )`;
}

Answer 1

Поскольку оператор + имеет более высокий приоритет , чем оператор ?:, ваше выражение эквивалентно:

('url(http://mybackend.com/' + item.node.image) ? item.node.image.key : ('notfound' + ')')

Вы должны поставить круглые скобки вокруг условного оператора:

'url(http://mybackend.com/' + (item.node.image ? item.node.image.key : 'notfound') + ')'