时间戳

首页 > 解决方案 > 无法从打字稿文件中获取 img url

html - 无法从打字稿文件中获取 img url

问题描述

我正在 ionic 中制作一个简单的应用程序，其中一个功能将可以选择显示注册用户列表及其个人资料图片。他们的个人资料图片存储在 Firebase 存储中。

我成功检索到个人资料图片的 URL，但是当我尝试将它们链接到我<img>的 HTML 文件中时，它似乎不起作用。我得到的 URL 是有效的，当我尝试将它复制粘贴到<img>它工作的标签时，但我希望它是动态的。

注册用户.html 文件：

<ion-item *ngFor="let profile of profiles">
  <ion-avatar item-left> <ion-img [src]="profile.url"> </ion-img> </ion-avatar>
  <h2>{{profile.name}}</h2>
  <span>{{profile.country}}</span>
  <button ion-button (click)="followProfile(profile.name);" outline item-right>Follow</button>
</ion-item>

注册用户.ts 文件：

export class RegisteredusersPage {

    private profileListRef = this.db.list<Profile>('profile-list');
    constructor(
        public navCtrl: NavController, 
        public navParams: NavParams, 
        private storage: Storage,
        private db: AngularFireDatabase, 
        private toastCtrl: ToastController, 
        public angularFireAuth: AngularFireAuth
    ) {}

    profiles = [];
    firestore = firebase.storage();
    
    ionViewDidLoad() {
        console.log('ionViewDidLoad RegisteredusersPage');
        this.getProfile();
    }

    getProfile() {
        console.log(this.db.list('profile-list'));
        var database = firebase.database();
        var ref = database.ref("profile-list");
        ref.on('value', this.gotData.bind(this), this.errData.bind(this));
    }

    async gotData(data) {
        console.log(data.val());
        var profilesArr = data.val();
        var keys = Object.keys(profilesArr);
        var that = this;
        var array = [];
        console.log("profilesArr: " + profilesArr);
        for (var i = 0; i < keys.length; i++) {
            var k = keys[i];
            var profileName = profilesArr[k].name;
            var profileCountry = profilesArr[k].country;
            var profileEmail = profilesArr[k].email;
            let imageName = k + "__" + "profile";
            if (profileName && profileCountry && profileEmail && profilesArr[k].email != this.angularFireAuth.auth.currentUser.email) {
                const profileImageUrl = await this.firestore.ref().child(profileEmail + "/images/" + imageName).getDownloadURL();
                array[i] = profilesArr[k];
                profilesArr[k].url = profileImageUrl;
                if (profilesArr[k].email != this.angularFireAuth.auth.currentUser.email) {
                    this.profiles[i] = profilesArr[k];
                    console.log("profiles[i].url:" + this.profiles[i].url);
                }
            }
        }
        console.log(this.profiles);
    }

和里面没问题，{{profile.name}}返回正确的 URL，但我似乎无法从 HTML 文件中引用它。{{profile.country}}this.profiles[i].url

不确定这是否重要，但这就是我的页面的样子。

标签： htmlangulartypescriptfirebaseionic-framework

解决方案

根据ahsan提供的答案，我所做的只是将标签更改为常规标签，现在一切正常。

所以而不是

<ion-avatar item-left> <ion-img [src]="profile.url"> </ion-img> </ion-avatar>

我是这样弄的

<ion-avatar item-left> <img [src]="profile.url"> </ion-avatar>

感谢所有为解决我的问题做出贡献的人！

推荐阅读