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

Question

我想将图像 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

只需将 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>

Answer 2

您问题的解决方案是将 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'

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

Angular 8 Display image src stored as ng model in variable

html

image

src

angular-ngmodel

angular