Angular 8显示以ng模型存储在变量中的图像src

Question

我想将image src显示为动态变量，我在名为displayedImage:的变量中声明了一个默认值为字符串

<div class="col-6 " style="margin-top: 35px;">
<div class="row">
<div class="col-6">
<img src="assets/cardsModels/Anniversaire.png" alt="">
</div>
</div>
</div>

**

this.displayedImage = 'assets/cardsModels/Anniversaire.pnf'

this.displayedImage在构造函数中声明，找不到该图像，因此无法显示！

Answer 1

问题的解决方案是更改类似html的(使用数据绑定(：

<div class="col-6 " style="margin-top: 35px;">
<div class="row">
<div class="col-6">
<img [src]="displayedImage" alt="">
</div>
</div>
</div>

并修复来自的拼写错误

this.displayedImage = 'assets/cardsModels/Anniversaire.pnf'

至：

this.displayedImage = 'assets/cardsModels/Anniversaire.png'

Answer 2

只需在src中为图像使用变量displayedImage：

<div class="col-6 " style="margin-top: 35px;">
<div class="row">
<div class="col-6">
<img [src]="displayedImage" alt="">
</div>
</div>
</div>

或者可以使用大括号{{ displayedImage }}:

<div class="col-6 " style="margin-top: 35px;">
<div class="row">
<div class="col-6">
<img src={{displayedImage}} />
</div>
</div>
</div>