Angular 8显示图像src存储为变量中的ng模型答案

【问题标题】：Angular 8 Display image src stored as ng model in variableAngular 8显示图像src存储为变量中的ng模型
【发布时间】：2020-03-13 22:42:03
【问题描述】：

我想将图像 src 显示为动态变量，我在名为 displayImage 的变量中声明了一个默认值作为字符串：

<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 在构造函数中声明，图片未找到，无法显示！

【问题讨论】：

Angular 4 Img src is not working的可能重复
您可能想使用Anniversaire.png 而不是.pnf
哦，是的.png XD，我的错误，谢谢！

标签： html angular image src angular-ngmodel

【解决方案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'

【讨论】：

【解决方案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>

【讨论】：