Question

首先对不起我的英文！我将尝试解释它，这是一个非常noob的问题，但这就是我现在的角度和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设置为该图片？

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

Answer 1

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

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

在HTML

1 个答案: