Load external image source using variable

angular, image

Solution

In case of "relative" url you have, it could be done like this:

<img [src]= "'//' + imgUrl" width="42" height="42" />

Problem

I couldn't load an external image using an url variable. The problem is that Angular auto complete the url to add `localhost:3000/` at the beguining of the url. Here is my component: ``` import { Component, Input, OnInit } from '@angular/core'; import { Cite } from './cite'; import { Engin } from './engin'; import { Station } from './station'; import { EnginService } from './engin.service'; @Component({ moduleId: module.id, selector: 'my-engin-detail', template: ` {{imgUrl}} <img [src]= "imgUrl" width="42" height="42" /> `, styles: [` `] }) export class EnginDetailComponent implements OnInit { constructor(private enginService: EnginService) { } @Input() engin: Engin; imgUrl: string; ngOnInit(): void { this.enginService.getImgUrl(this.engin.id_engin) .then(url => this.imgUrl = url); } } ``` the output is 192.168.0.102/resultsdetails/image/assets/E207_1.png //that's => {{imgUrl}} ERROR 404 : http://localhost:3000/192.168.0.102/resultsdetails/image/assets/E207_1.png 404 (Not Found) Here angular2 compiler autocomplete the url with "http://localhost:3000/" and i don't want that. However this works fine: ``` <img src="192.168.0.102/resultsdetails/image/assets/E207_1.png" width="42" height="42/> ``` So, I don't know how to inject a variable in the [src] without an autocompletion with `/localhost:3000`

Original source