Angular -如何随机选择文件夹中的图像来设置背景

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BackgroundService {
  private imageList: string[] = []; // 用于保存图像文件列表
  private selectedImage: string; // 用于保存选中的图像文件路径

  constructor(private http: HttpClient) { }

  getRandomImage(folderPath: string): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      this.http.get(folderPath).subscribe((response: any) => {
        this.imageList = response; // 假设服务器返回一个包含图像文件路径的数组
        const randomIndex = Math.floor(Math.random() * this.imageList.length);
        this.selectedImage = this.imageList[randomIndex];
        resolve(this.selectedImage);
      }, error => {
        reject(error);
      });
    });
  }

  getSelectedImage(): string {
    return this.selectedImage;
  }
}

import { Component, OnInit } from '@angular/core';
import { BackgroundService } from '路径/到/background.service';

@Component({
  selector: 'app-background',
  templateUrl: './background.component.html',
  styleUrls: ['./background.component.css']
})
export class BackgroundComponent implements OnInit {
  backgroundImage: string;

  constructor(private backgroundService: BackgroundService) { }

  ngOnInit(): void {
    const folderPath = '路径/到/图像文件夹';
    this.backgroundService.getRandomImage(folderPath).then(imagePath => {
      this.backgroundImage = imagePath;
    }).catch(error => {
      console.error(error);
    });
  }
}

<div [ngStyle]="{'background-image': 'url(' + backgroundImage + ')'}">
  <!-- 页面内容 -->
</div>