Load an external image source using a variable

Question

Hello

I could not load the external image using the url variable. The problem is that Angular auto completes the url to add "localhost: 3000 /" when the url starts, here is my ty 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);
     }
 }

conclusion

192.168.0.102/resultsdetails/image/assets/E207_1.png//that => {{imgUrl}}

ERROR 404: http: // localhost: 3000 / 192.168.0.102 / resultsdetails / image / assets / E207_1.png 404 (not found)

Here the angular2 compiler autocompletes url with http: // localhost: 3000 / ", and I don't want this.

However, this works great:

<img src="192.168.0.102/resultsdetails/image/assets/E207_1.png" width="42" height="42/>

So, I do not know how to enter a variable in [src] without autocompletion with / localhost: 3000

thank

Answer 1

"" URL- , :

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