如何显示头像?

时间:2018-08-10 03:52:42

标签: angular

当化身从后端加载并尝试以角度显示图片视图时。 Angular被视为图像类型text / html。因此,有一个错误:

  

获取http://localhost:4200/photos/original/missing.png 404(未找到)

我不明白问题是什么。

html:

<div class="card-avatar" *ngIf="authService.currentUserData">
    <ng-container *ngFor="let photo of filteredPhotos">
       <a>
         <img  [src]="photo.photo" name="photo">                        
       </a>
    </ng-container>
</div>

ts:

  filteredPhotos =[];


  private loadPhotos() {
    let filteredPhotos;
    if (this.servPhoto) {
        this.servPhoto.getPhotos().subscribe(photo => {
          if(!this.authService.currentUserData) {    return; }
            this.photos = photo;
            this.filteredPhotos = this.photos.filter((photo) => photo.users_id == this.authService.currentUserData.id);
        });
    }
  }

photo.model.ts:

export class Photo{
    constructor(
        public users_id: number,
        public photo: Blob
    ) { }
}

2 个答案:

答案 0 :(得分:0)

如果您使用的是Angular CLI,则将photos文件夹添加到angular.json(angular cli 6.0)或.angular-cli.json(angular cli <6)中的资产中。

"assets": [
          "src/photos",
          "src/favicon.ico"
        ],

如果您使用的是Webpack,请使用copywebpack插件(const CopyWebpackPlugin = require('copy-webpack-plugin'); )

 new CopyWebpackPlugin([
        { from: 'src/photos', to: 'photos' }]

答案 1 :(得分:-1)

问题出在服务器端,而不是角度

它的作用是将每个网址作为html页面

您需要做的是将资产文件夹设置为公用,然后尝试直接访问它。


如果服务器位于节点中,并且您正在使用express then,那么这是您需要编写的行,以提供对服务器/资产文件夹的公共访问权限

app.use('/assets' , express.static('server/assets/'));