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

Posted 2023-03-13

【中文标题】无法从打字稿文件中获取 img url

【英文标题】：Can't manage to fetch img url from a typescript file

【发布时间】：2019-02-01 23:46:32

【问题描述】：

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

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

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

registeredusers.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和profile.country没问题，this.profiles[i].url返回正确的URL，但我似乎无法从HTML文件中引用它。

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

【问题讨论】：

检查是否需要使用“http://...”，否则应用会在 assets 文件夹中查找 img

已编辑：哦，没关系，我理解你，我现在就试试。但是profiles[i].url是这种格式firebasestorage.googleapis.com***************c0

你的照片在哪里？如果它们在文件夹中，则可以使用 [src]="'folder/'"+profile.url，但如果在服务器中，则必须指明 angular http: [src]=" ' http://www.dominio .com' "+profile.url

为什么不创建imageUrl 的属性并将其分配给 src 以便您可以动态分配来自后端的 iamge？也尝试使用 `[src] ="../../profile.png"

我将 src 属性设置为：[src]="'http://'"+profile.url 但它引发了异常：ERROR DOMException: Failed to execute 'setAttribute' on 'Element ': '+profile.url' 不是有效的属性名称。不知道我说的对不对？我的 profile.url 变量已经包含“https://”部分。

【参考方案1】：

 <div class="body table-responsive">
    <table class="table-bordered table-striped" style="width:100%; padding: 10px;">
      <thead>
        <tr>
         <th style="width:10%">Image</th>
        </tr>
      <thead>
      <tbody>
       <tr *ngFor="let profile of profiles">
        <td>
         <img [src]="profile.url" class="img-circle">
        </td>
       </tr>
      </tbody>
    </table>
  </div>

【讨论】：

基于这个答案，我所做的只是将 ion img 标签更改为常规 img 标签，现在一切正常。

很高兴知道:)

【参考方案2】：

您可以包含 DOMSanitizer 类。

constructor(
        public sanitizer: DomSanitizer)  

在模板中：

<ion-img [src]="sanitizer.bypassSecurityTrustUrl(profile.url)"> </ion-img>

【讨论】：

感谢您的建议！但不幸的是，它给了我这个错误： ERROR TypeError: newSrc.indexOf is not a function

【参考方案3】：

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

所以不是

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

我是这样设计的

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

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