使用变量加载外部图像源答案

【问题标题】：Load external image source using variable使用变量加载外部图像源
【发布时间】：2017-03-11 05:45:00
【问题描述】：

我无法使用 url 变量加载外部图像。问题是 Angular 会自动完成 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);
     }
 }

输出是

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

错误 404： http://localhost:3000/192.168.0.102/resultsdetails/image/assets/E207_1.png 404（未找到）

这里 angular2 编译器使用“http://localhost:3000/”自动完成 url，我不希望这样。

但是这很好用：

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

所以，我不知道如何在没有自动补全 /localhost:3000 的情况下在 [src] 中注入变量

【问题讨论】：

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

标签： image angular

【解决方案1】：

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

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

【讨论】：