时间戳

首页 > 解决方案 > 在 Angular 中为图像源使用动态名称

html - 在 Angular 中为图像源使用动态名称

问题描述

我有一些纸牌。我想为每个甲板显示一个特定的图像，我有一个包含所有图像的资产文件夹。

<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>

如何以动态方式在 src 属性中连接deck.deckClass 名称？

标签： htmlangulartypescript

解决方案

考虑使用表达式上下文

你可以用方括号将 sry 属性包裹起来，这样 Angular 就会知道如何评估该值：

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

在此处查看演示：https
://stackblitz.com/edit/angular-ua9cfc 我那里没有图像，因此它们将在演示中显示为损坏的 img ...

ps：如果这些图像在您的src/assets/文件夹中，那么这就足够了：

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

推荐阅读