CODEWITHSUNDEEP
htmlangularimagesrcangular-ngmodel
547n00n
547n00n

Reputation: 1536

Angular 8 Display image src stored as ng model in variable

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 !

Upvotes: 4

Views: 13062

Answers (2)

StepUp
StepUp

Reputation: 38094

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>

Upvotes: 4

Mykola Zatonatskiy
Mykola Zatonatskiy

Reputation: 349

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'

Upvotes: 6

Related Questions