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 !

Possible duplicate of Angular 4 Img src is not working

Yann Bertrand
– Yann Bertrand

2019-11-18 14:22:23 +00:00
Commented Nov 18, 2019 at 14:22 — Yann Bertrand
– Yann Bertrand, Commented Nov 18, 2019 at 14:22
you might want to use Anniversaire.png and not .pnf

Poul Kruijt
– Poul Kruijt

2019-11-18 14:22:25 +00:00
Commented Nov 18, 2019 at 14:22 — Poul Kruijt
– Poul Kruijt, Commented Nov 18, 2019 at 14:22
oh yes .png XD, my mistake , thanks !

547n00n
– 547n00n

2019-11-18 14:36:09 +00:00
Commented Nov 18, 2019 at 14:36 — 547n00n
– 547n00n, Commented Nov 18, 2019 at 14:36

Mykola Zatonatskiy · Accepted Answer · 2019-11-18 14:26:59Z

6

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'

answered Nov 18, 2019 at 14:26

Mykola Zatonatskiy

3491 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StepUp · Accepted Answer · 2019-11-18 14:29:34Z

4

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>

edited Nov 18, 2019 at 14:29

answered Nov 18, 2019 at 14:21

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Collectives™ on Stack Overflow

Angular 8 Display image src stored as ng model in variable

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related