Ionic 使用Angular在HTML中显示从Firebase检索到的img

ufj5ltwl  于 12个月前  发布在  Ionic
关注(0)|答案(1)|浏览(141)

首先对不起我的英语!我会尝试解释它,这是一个非常菜鸟的问题,但这就是我现在对angular和html的看法。我从我的firebase数据库中检索了一个对象,它是一个包含图像源的字符串(http://picture.png)。我如何使用它使它成为html img的src?
这是我的代码:
超文本标记语言:

<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>

带有angular代码的user-provider:

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设置为该图片?
我希望你能理解我。谢谢你,谢谢

mklgxw1f

mklgxw1f1#

如果返回的元素有一个字符串属性,其中包含一个到某个服务器上的资源的绝对链接(例如http./image.jpg),您可以通过以下方式创建一个img:

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

相关问题