Load external image source using variable

Question

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

var imgUrl = "192.168.0.102/resultsdetails/image/assets/". Then use it as the url — John Baird
– John Baird, Commented Oct 28, 2016 at 10:52
the content of imgUrl is correct, I already test it with {{imgUrl }} — user1488211
– user1488211, Commented Oct 28, 2016 at 11:25
it should be //192.168.0.102/... or http(s)://192.168.0.102/... Your url is relative, so browser adds domain o the beginnig of it. — admax
– admax, Commented Oct 28, 2016 at 12:03

admax · Accepted Answer · 2016-10-28 12:08:10Z

3

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

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

answered Oct 28, 2016 at 12:08

admax

1,6712 gold badges16 silver badges23 bronze badges

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

1 Comment

Jeroen Over a year ago

If I understand the question correctly, the problem is that angular makes the URL relative even when it shouldn't be.

Collectives™ on Stack Overflow

Load external image source using variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related