Question

当化身从后端加载并尝试以角度显示图片视图时。 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
    ) { }
}

Answer 1

如果您使用的是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' }]

Answer 2

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

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

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

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

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

如何显示头像？

2 个答案: