Question

我正在尝试在HTML模板中使用Blob文件。我通过API调用存储区，然后将其存储在一组用户中。

我不知道是否必须使用blob，是否必须对其进行解码，是否有一种更简单的方式来显示图像或其他内容。

我认为这是我保存图像的方式不起作用，但是我需要您的建议。

MsConnectionProvider.ts

import { UserModelProvider } from './../user-model/user-model';
import { MSAdal, AuthenticationContext, AuthenticationResult } from '@ionic-native/ms-adal';

export class MsConnectionProvider {

  userInfo : UserModelProvider;
  users: UserModelProvider[] = [];

getPhoto(mail){
    fetch("https://graph.microsoft.com/v1.0/users/" + mail + "/photo/$value", {
      headers: {
          Authorization: "Bearer " + this.accessToken
      } 
    })
    .then((response) => response.blob()).catch(err => console.log("erreur"))
    .then((blob) => {
      const imageUrl = URL.createObjectURL(blob);
      return imageUrl;
    });
  }

  addUserInfo(name, job, departement, mail){
    this.userInfo = new UserModelProvider();
      this.userInfo.name = name;
      this.userInfo.job = job;
      this.userInfo.departement = departement;
      this.userInfo.mail = mail;
      this.userInfo.photo = this.getPhoto(mail);
    console.log("Name:", this.userInfo.name);
    this.users.push(this.userInfo);
  }

  getUserInfo(){
    let header = new Headers({
      Authorization: this.accessToken
    });
    let options = new RequestOptions({headers: header});

    this.usersSubscription = this.http.get("https://graph.microsoft.com/v1.0/groups/**someId**/members", options).map(res => res.json()['value']);
    this.usersSubscription.subscribe(res => {
      for (let user of res){
        this.addUserInfo(user.displayName, user.jobTitle, "something", user.mail);
      }
    });
  }
}

file.html

<div *ngFor="let user of this.msInfo.users">
    <img [src]="user.photo"/>
</div>

user.photo的结果是这样的。

blob:http://localhost:8080/fa1f42bd-0871-456c-b852-f199a1b14b8f

只是向您展示我的使用方式

file.ts

import { MsConnectionProvider } from './../../providers/ms-connection/ms-connection';

export class fileComponent {
  constructor(public msInfo: MsConnectionProvider) {

}

文件不是文件的真实名称，而只是一种方式

预先感谢您，因为我对blob文件了解不多

如何在img标签中使用blob？

0 个答案: