CODEWITHSUNDEEP
angular
Julien
Julien

Reputation: 2756

How to render a variable of type HTMLImageElement in Angular 2

When I do 

<div>my image : {{myVar}}</div>

my browser displays

<div>my image : [object HTMLImageElement]</div>

How can I display the image itself instead?

Upvotes: 4

Views: 4748

Answers (3)

Soro Mamadou
Soro Mamadou

Reputation: 11

Replace src by attr.src. Try this

my image : img attr.src={{image.source}}>

Upvotes: 0

Jonathan Niu
Jonathan Niu

Reputation: 321

Any specific reason why you can't do something like 

<div>my image : <img src={{image.source}}></div>

instead?

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657821

I don't think there is a way to add an HTMLImageElement though Angular bindings.

This should work:

<div>my image : <span #imgTarget></span></div>

@ViewChild('imgTarget') imgTarget:ElementRef;

ngAfterViewInit() {
  this.imgTarget.nativeElement.appendChild(this.myVar);
}

Upvotes: 4

Related Questions