2016-10-28 2 views
4

Hellow,externe Bildquelle laden mit Variable

Ich konnte ein externes Bild nicht mit einer URL-Variable laden. Das Problem ist, dass Angular automatisch die URL abschließt, um "localhost: 3000 /" am Anfang der URL hinzuzufügen. hier ist meine Komponente ty

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); 
    } 
} 

die Ausgabe

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

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

Hier angular2 Compiler die uRL mit "http://localhost:3000/" automatisch vervollständigt, und ich will nicht, dass.

dies funktioniert aber fein:

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

Also, ich weiß nicht, wie eine Variable in der [src] mit/localhost ohne automatische Vervollständigung zu injizieren: 3000

Danke

+0

var imgUrl = „192.168.0.102/resultsde tails/image/assets/". Dann benutze es als die URL –

+0

der Inhalt von imgUrl ist korrekt, ich teste es bereits mit {{imgUrl}} – user1488211

+0

sollte es //192.168.0.102/... oder http (s): //192.168.0.102/ sein. .. Ihre URL ist relativ, so dass der Browser eine Domain am Anfang hinzufügt. – admax

Antwort

4

Bei der "relativen" url Sie haben, könnte es wie folgt geschehen:

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