最新版本的Angular：图像在本地主机上加载，但在Firebase或Amazon S3上部署时不会加载

Question

伙计们，我正在尝试托管我的angular应用程序，将图像加载到模板上时，一切工作都很好，但是当我将其托管在AWS S3或Firebase上时，它们都具有相同的结果并且不加载。这些图像存储在MongoDB中，并作为base64图像恢复，然后使用以下代码将它们加载到image标签上：

<a><img class="image-category" [src]="'data:image/png;base64,'+categories[i].thumbnail" (error) = "filename = '../../assets/default-category.png'" /></a><br>

我有些想法没用了，我真的不知道还有什么可以尝试的。

本地主机输出 FireBase或S3输出

而且图像是异步加载的，所以我写了一个检查方法来不断检查它们是否都完成加载。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { GetcategoriesService } from 'src/app/services/getcategories.service';
import { Categories } from 'src/app/classes/categories';
import { ImageuploadService } from 'src/app/services/imageupload.service';
import { interval, Subscription } from 'rxjs';
@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.scss']
})
export class CategoriesComponent implements OnInit, OnDestroy {

  categories: Categories;
  filename: string;
  tempImg: string;
  initialized = false;
  catinitialized = false;
  subscription: Subscription;

  constructor(private getCategoriesService: GetcategoriesService, private imageUploadService: ImageuploadService) { }

  ngOnInit(): void {
    this.getCategories();
    const source = interval(500);
    this.subscription = source.subscribe(val => this.initializeImages());
  }

  initializeImages(){
    if (this.catinitialized)
    {
      try{
        console.log(this.categories);
        for (const index of this.categories)
        {
          console.log(index);
          this.imageUploadService.getFile(index.thumbnail).subscribe(
          (image) => {
            index.thumbnail = image['pic']['data'];
            console.log(index.thumbnail);
          });
        }
        this.initialized = true;
        console.log(this.initialized);
        this.subscription.unsubscribe();
      }catch (e){}
    }
  }

  getCategories()
  {
    this.getCategoriesService.getCategories().subscribe(
      (response) => {
          console.log(response);
          this.categories = response;
          this.catinitialized = true;
          console.log('Finished loading...');
      }
    );
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

这是html

<div class="container">
    <div *ngIf="initialized==true" class="row">
        <div class="image-container justify-content-center col-lg-2 col-md-4 col-sm-12" *ngFor="let category of categories;let i = index;">
            <a><img class="image-category" [src]="'data:image/png;base64,'+categories[i].thumbnail" (error) = "filename = '../../assets/default-category.png'" /></a><br>
            <a><h1 class="label-category">{{category.name}}</h1></a>
        </div>
    </div>
</div>

最后是scss

.container{
    padding-top: 200px;
}

.row{
    width: 100%;
    height: 100%;
}

.image-container{
    width: 100%;
    height: 100%;
}

.image-category{
    border-radius: 5%;
    width: 150px;
    height: 150px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.label-category{
    text-align: center;
    padding-bottom: 10%;
}