Image 使用变量加载外部图像源

嗨

我无法使用url变量加载外部图像。 问题是，您需要自动完成url以在url开头添加“localhost:3000/” . 这是我的零件

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

从'@angular/core'导入{Component，Input，OnInit}；
从“/Cite”导入{Cite}；
从“/eng”导入{eng}；
从“./站”导入{Station}；
从“/engin.service”导入{EnginService}；
@组成部分({
moduleId:module.id，
选择器：“我的引擎详细信息”，
模板：`
{{imgUrl}}
`,
风格：[`
`]
})
导出类EnginDetailComponent实现OnInit{
建造商（专用引擎服务：引擎服务）{
}
@输入（）
引擎：引擎；
imgUrl：字符串；
ngOnInit（）：void{
this.engineservice.getImgUrl（this.engin.id\u引擎）
。然后（url=>this.imgUrl=url）；
}
}

输出是

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

错误404： 404（未找到）

这里angular2编译器用“”自动完成url，我不希望这样

但是，这很好：

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

因此，我不知道如何在没有/localhost:3000自动完成的情况下在[src]中注入变量

谢谢

如果您有“相对”url，可以这样做：

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

var imgUrl=“192.168.0.102/resultsdetails/image/assets/”。然后将其用作URL如果imgUrl的内容是正确的，我已经用{{imgUrl}对其进行了测试，它应该是//192.168.0.102/。。。或http://192.168.0.102/。。。您的url是相对的，所以浏览器会在它的开头添加域。