Angular2：如何使用Promise显示图像？

以下是我的组件，我希望使用Promise显示图像。以下是我的代码，浏览器运行时无响应。任何人都可以帮助我解决这个问题。Angular2：如何使用Promise显示图像？

HTML: 
<img [src]="getImage()" /> 

JS: my.component.ts 

// ... 

public imageUrl:string; 

constructor() { 

    this.imageUrl = "path-to-my-image/image.png"; 
} 

getImage(){ 
    return new Promise((resolve,reject) =>{ 
     // this.imageUrl is not static one, it may fetch from the server 
     resolve(this.imageUrl); 
    }); 
} 

// ...

来源

2017-05-07 PARAMANANDA PRADHAN

当你使用一个函数调用，你是对的src值，角度的变化检测机制将一遍又一遍调用它。在你的情况下，这将启动服务器调用数百或数千次。

你想要的是沿着线的东西：

<img [src]="image | async"> 

ngOnInit() {  
    this.imageUrl = "path-to-my-image/image.png"; 
    this.image = this.getImageUrl(); 
} 

getImageUrl() { 
    return new Promise((resolve,reject) =>{ 
    // this.imageUrl is not static one, it may fetch from the server 
    resolve(this.imageUrl); 
    }); 
}

然而，这将工作只有一次。换句话说，如果再次拨打getImageUrl，则不会发生任何事情。您可能需要的是将网址制作为流（可观察）：

<img [src]="image$ | async"> 

ngOnInit() {  
    this.imageUrl = "path-to-my-image/image.png"; 
    this.image$ = this.getImageUrl(); 
} 

getImageUrl() { 
    return Observable.of(this.imageUrl); 
}

来源

2017-05-07 12:29:06

谢谢，它现在正在工作。 –

嗨，还有一个疑问。图像列表如何解决这个问题？我想在side * ngFor中使用用户图像。在这种情况下，我无法创建像'this.image $'这样的Observable对象，请帮助我。代码看起来像：

–

根据你想要做什么，考虑一个url数组的可观察值。然后你可以说''。 – 2017-05-07 12:49:04

Angular2：如何使用Promise显示图像？

回答

相关问题