Display images from nestjs-mongodb server to Angular frontend

I'm trying to upload images from Angular side to NestJs. Actually it's a book that I upload. And I upload the book with descriptions and images. Now I'm able to upload the image, and able to store the image path as reference, with the book. Now the scenario is that When I upload a book from Angular side, It Post the book with imagepath, and the image is getting stored in the NestJs folder also, but I can not display book with it's image. The book is displaying at frontend but without it's image that is referenced and saved at the backend. So please tell me how to display the images, it will be a huge hep.

Front end result(Books without Images) enter image description here enter image description here

Anguar FrontEnd Code .ts

export class BooksComponent implements OnInit {
  BookForm = new FormGroup({
    _id: new FormControl(''),
    name: new FormControl(''),
    author: new FormControl(''),
    price: new FormControl(''),
    genres_name: new FormControl(''),
    coverimage: new FormControl(''),
  });
  results?: Book[] = [];
  searchedText: string = '';
  constructor(
    private readonly apiService: ApiService,
    private router: Router
  ) {}

  ngOnInit() {
    this.apiService.getallbooks().subscribe((data) => {
      this.results = data;

      console.log(this.results);
    });
  }

NestJs backend code where I am storing the images in "./assets" folder. I even tried with making a @Get Request for images but no help.

@ApiTags('Book Cover Images')
@Controller('images')
export class ImagesController {
  static imageUrl: string;
  constructor(private readonly bookservice: BooksService) {}

  @Post('upload')
  @UseInterceptors(
    FileInterceptor('file', {
      storage: diskStorage({
        destination: './assets/',
        filename: (req, file, cb) => {
          const filename: string = Array(10)
            .fill(null)
            .map(() => Math.round(Math.random() * 16).toString(16))
            .join('');
          return cb(null, `${filename}${extname(file.originalname)}`);
        },
      }),
    }),
  )
  async uploadFile(@UploadedFile() file: Express.Multer.File, @Request() req) {
    console.log(file);
    return this.imageUrl(file);
  }

  private imageUrl(file: Express.Multer.File) {
    ImagesController.imageUrl = `./assets/${file.originalname}`;
    return ImagesController.imageUrl;
  }


// @Get('bookimages/:imagename')
  // findbookimages(
  //   @Param('imagename') imagename,
  //   @Res() res,
  // ): Observable<Object> {
  //   return of(res.sendFile(join(process.cwd(), '.assets/' + imagename)));
  // }
}

Frontend html code.I'm getting all the information but not the image, here I'm providing src in img tag to display images

<div class="grid" *ngFor="let result of results">
    <div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
      <img
        class="image"
        src="http://localhost:3000/{{ result.coverimage }}"
        alt=""
        height="400px"
        width="250px"
        style="border: 1px solid red"
      />

      <div class="title-content">
        <h3>
          <a href="#">{{ result?.name }}</a>
        </h3>
        <div class="intro">
          <h5>
            <a>Author<b>:</b>&nbsp;{{ result?.author }}</a>
          </h5>

          <h5>
            <a>Price<b>:</b>&nbsp;Rs{{ result?.price }}</a>
          </h5>
          <h5>
            <a>Genre<b>:</b>&nbsp;{{ result?.genres_name }}</a>
          </h5>
        </div>
      </div>