在 HTML 中使用 Angular 从 Firebase 中显示检索图像答案

【问题标题】：Show a retrieved img from Firebase with Angular in HTML在 HTML 中使用 Angular 从 Firebase 中显示检索图像
【发布时间】：2017-06-28 19:47:25
【问题描述】：

首先对不起我的英语！我将尝试解释它，这是一个非常菜鸟的问题，但这就是我现在使用 angular 和 html 的问题。我从我的 firebase 数据库中检索到一个对象，它是一个包含图像源 (http://picture.....png) 的字符串。如何使用它使其成为 html img 的 src？这是我的代码：

HTML：

                <span *ngIf="chat.from !== uid">
              <ol class="chat">
                <li class="self">
                        <div class="avatar"><img src="picture" **<--- here goes the retrieved picture** draggable="false"/></div>
                      <div class="msg">
                        <p>{{ chat.message }}</p> 
                        <time>{{ chat.time }}</time>
                      </div>
                </li>
              </ol>
          </span> 
         </span>

带有角码的用户提供者：

  getUserPicture(company: string, userid: string) { 
  return this.getUid().then(uid => {
    return this.db.object(`companies/${company}/users/${uid}/sPicture`);
});

}

用户页面：

    openChat(key) { 
    this.userProvider.getCompany().then(company => { 
        this.userProvider.getUserPicture(company, key).then(picture => {
            let param = {company: company,uid: this.uid, interlocutor: key, picture: picture};
            this.nav.push(ChatViewPage,param);    
        }) 
});

当我打印它时显示：

this.picture = params.data.picture;

console.log: picture = [object Object]

所以我很确定它可以正常检索。我需要将其转换为字符串吗？如何将 src img 设置为那张图片？

我希望你能理解我。谢谢！

【问题讨论】：

标签： html angular firebase ionic-framework

【解决方案1】：

如果返回的元素有一个字符串属性，其中包含指向某个服务器中资源的绝对链接（例如 http.../image.jpg），您可以通过以下方式创建一个 img：

<img [src]="componentProperty"></img>

【讨论】：