Angular 8 显示图像 src 存储为 ng model 变量

Question

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

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中使用您的变量 displayImage 来获取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>