Angular 2: Dynamic Images

Question

What's the best way to set an img tag in Angular2?

This doesn't work (and not because of the key):

<img src="//maps.googleapis.com/maps/api/streetview?size=400x400&location="{{property.lat}}, {{property.long}}"key=aiwefmboij234blahblah" />

How do we pass in the lat/long values into the src attribute?

Thanks!

Answer 1

There is no need to close the " on the src attribute. if you close it, it will renderer like this:

<img src="//maps.googleapis.com/maps/api/streetview?size=400x400&location=" 12.121212 , 13.31133 "&key=aiwefmboij234blahblah" />

Which is not a correct HTML;

One way to correctly do it:

<img src="//maps.googleapis.com/maps/api/streetview?size=400x400&location={{property.lat}},{{property.long}}&key=aiwefmboij234blahblah" />

Another way is to build the url on the component and assign it to a variable, then:

<img [src]="urlVariable" />