convert path mapped JSON response into image Angular (Errror Get 404)

0
votes

When I @GET the product, the images of the products are not visible and it throws error GET http://localhost:3000/assets/imagename.png 404 (Not Found). I saw the Network request and I found that the images are returning to frontend from NestJs server, but the type is JSON with 404. Somebody tell me how to convert that JSON OR text/html response into actual image that is uploaded to server.

Angular: uploading products with image

export class AdbooksComponent implements OnInit {
  imagedata?: string;
  book!: Book;
  AddbookForm = new FormGroup({
    bid: new FormControl(''),
    name: new FormControl(''),
    author: new FormControl(''),
    price: new FormControl(''),
    genres_name: new FormControl(''),
    coverimage: new FormControl('', {
      validators: [Validators.required],
    }),
  });
  constructor(
    private readonly apiService: ApiService,
    private readonly router: Router,
    private readonly http: HttpClient
  ) {}

  ngOnInit() {}
  async addall() {
    this.addfile();
    this.addbooks();
    this.AddbookForm.reset();
    // this.imagedata = '';
  }
  async addfile() {
    let formData = new FormData();
    formData.set(
      'file',
      this.AddbookForm.value.coverimage,
      this.AddbookForm.value.coverimage.name
    );
    this.http
      .post('http://localhost:3000/images/upload', formData, {
        responseType: 'blob',
      })
      .subscribe((res) => {});
  }
  async addbooks() {
    (await this.apiService.addbooks(this.AddbookForm.value)).subscribe(
      (res) => {
        console.log(res);
      }
    );
  }

  async uploadimage(event: any) {
    const file = event.target.files[0];
    this.AddbookForm.patchValue({ coverimage: file });
    const allowedMimeTypes = ['image/png', 'image/jpeg', 'image/jpg'];
    this.AddbookForm.get('coverimage')?.updateValueAndValidity();
    if (file && allowedMimeTypes.includes(file.type)) {
      const reader = new FileReader();
      reader.onload = () => {
        this.imagedata = reader.result as string;
      };
      reader.readAsDataURL(file);
      console.log(file);
    }
  }
}

Angular:Showing all products

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

Angular : Showing All products html

<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"
        />
angular