Angular 8 Display image src stored as ng model in variable

Question

I want to display image src as dynamic variable, I declared a default value as string in variable named 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 declared in the constructor, the image not found and cannot be displayed !

Answer 1

The solution to your question is to change html like (using data binding):

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

And fix the typo from:

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

to:

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

Answer 2

just use your variable displayedImage in src for an image:

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

or you can use curly braces {{ displayedImage }}:

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