Использование динамического c имени для источника изображения в Angular

Question

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

<div class="decks">

  <div *ngFor="let deck of decks" class="deck">

    <img
    src="../../assets/img/MAGE.png" 

MAGE - это просто пример deckClass, это имя должно соответствовать deck.deckClass

  class="img-responsive"
  style="height: 200px;">

  <h4> {{deck.deckName}} : {{deck.deckClass}} </h4>
  <p *ngFor="let card of deck.deckCards" >
    {{ card.name }} : {{ card.manaCost }}
  </p>

</div>
</div>

Как я могу объединить в атрибуте sr c имя deck.deckClass динамически c способом?

Answer 1

Рассмотрите возможность использования Контекст выражения

Вы можете заключить атрибут sry в квадратные скобки, таким образом Angular будет знать, чтобы оценить значение:

[src]="'../../assets/img/' + deck.deckClass '.png'"

См. Демо здесь: https://stackblitz.com/edit/angular-ua9cfc
У меня там нет изображений, поэтому они будут показаны как разбитые изображения в демо ...

ps: если эти изображения находятся в вашей папке src/assets/, тогда этого должно быть достаточно:

[src]="'assets/img/' + deck.deckClass '.png'"