は、私はそのような何かをしようとしているSRC

Question

のパスを定義するためにで関数を呼び出します。

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> 

機能は次のとおりです。

getIcon(status){ 
    switch (status) { 
     case 'Ongoing': 
     return '../../../../assets/img/icon/PinPlot.png'; 
     case 'Signaled': 
     return '../../../../assets/img/icon/PinWarning.png'; 
     case 'Finished': 

     default: 
     return '../../../../assets/img/icon/Pin red.png'; 
    } 
    } 

しかし、私が得るすべては何の画像ではありませんそれが見つからない場合のように。しかし、エラーも警告もありません。

Answer 1

使用[src]：

<img id="icon" class="cercle icon" [src]="getIcon(item.status)" alt=""> 

そしてまた、あなたがgetIcon({{item.status}})ではなく{{}}せずに必要いけません。

Answer 2

[src]の以前の回答は私がお勧めする方法ですが、既存のテクニックがうまくいかない理由は、補間（つまり{{....}}）を正しく使用していないためです。

あなたが持っている：

<img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> 

あなたはおそらく意味する場合：

<img id="icon" class="cercle icon" src="{{ getIcon(item.status) }}" alt=""> 

説明：あなたはこのよう考えることができ

。テンプレート内では、{{}}外のすべてがリテラル文字列として扱われます。これは、実行するコードとして扱われ、二重括弧内で唯一のものです。だから、あなたの例で、あなたは括弧を置く場所のため、あなたは文字列で終わるだろう：

src="getIcon(Ongoing)" 

を補間した後、あなただけの代わりに、全体の、あなたのカッコ内にitem.statusを含めているのcuz表現。