网络显示 http 响应未定义 Angular 13

Question

I'm trying to get the products from NestJS server.And the products are coming but the attached images are not visible.According to some stackoverflow answers we have to convert the coming images into their format.But the thing is I'm receiving an entire object list not just images.So I tried to seprate the images from subscribed data using map function.And after implementing some conversion function logic, I'm getting undefined in Network Panel

In the following screen shot you can see the undefined with text/html type response in Network tab,and below the network tab details,all the image paths are visible in console panel

get method in service.ts file.By setting responseType:'blob' gives error,so I didn't set blob

public getallbooks(): Observable<any> {
    return this.httpclient.get(
      `${this.API_SERVER}/books`
      //  {
      //   responseType: 'blob',
      // }
    );
  }

component.ts file here is the function for converting images and also displaying the product

  image!: any;
  results?: Book[];

ngOnInit() {
    this.apiService.getallbooks().subscribe((data: Book[]) => {
      this.results = data;
      const arr = this.results?.map((i) => {
        return i.coverimage;
      });
      this.createImageFromBlob(arr);
      console.log(this.results);
      console.log(arr);
});
 }
createImageFromBlob(image: any) {
    let reader = new FileReader();
    (reader.onload = () => {
      this.image = this.sanitizer.bypassSecurityTrustUrl(
        reader.result as string
      );
    }),
      false;
    if (image) {
      reader.readAsDataURL(new Blob([this.image]));
    }
  }

html code

<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/' + image | safeurl"
          alt=""
          height="400px"
          width="250px"
          style="border: 1px solid red"
        />

I also think this might be a backend issue as well

NestJs file upload code

@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)}`);
        },
      }),
    }),
  )
  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.filename}`;
    return ImagesController.imageUrl;
  }
}

Nest Js books.service.ts business logic to upload product with image path attachement

async addbooks(book: Book): Promise<bookdocument> {
    book.coverimage = ImagesController.imageUrl;
    return await this.book_model.create(book);
  }

NestJs endpoint to upload book

@Post()
  async addbooks(@Body() book: Book) {
    const uplaodbook = await this.bookservice.addbooks(book);
    return uplaodbook;
  }

Answer 1

So in my case I had a list of books and each book has path for its image. I was using ngFor and set the image src with the path. That is the right way. But the images were not visible and Network was showing images as text/html type. The actual issue here was not the type ,the actual issue was in my URL .I had a folder in NestJs server by the name of assets ,that is present at root , and I had set the path for the images(in NestJs file upload code), like this ./assets/ . That is also the correct way to set the destination folder.I was able to see the images at browser like this http://localhost:3000/imagename.png ,and that means my server configured to server/serve my images over root URL that's why I can access them http://localhost:3000/imagename.png . But my api was returning images in a format that contains ./assets/ in the URL. So with the following code

<div *ngIf="image">
          <img
            class="image"
            [src]="'http://localhost:3000/' + image | safeurl"
            alt=""
            height="400px"
            width="250px"
            style="border: 1px solid red"
          />
        </div>

I am assuming that I'm hitting the Url like this http:localhost:3000/imagename.png with pipe safurl to sanitize and tell Angular that this url is safe. But actually Angular was seeing the URL like this http:localhost:3000/./assets/imagename.png . And this is note the correct URL Format . Urls don't work with . or , .Also becasue my server is configured at root, this url http;//localhost:3000/assets/imagename.png is also wrong.And root means that, whatever the thing is set at root , that is directly access able after your server's port number. Example http://localhost:YourServerPortNumber/TheThing_Set_at_Root .

So the solution for this issue is the following

src="http://localhost:3000/{{
              result.coverimage.replace('./assets/', '')
            }}"

And also this

<div *ngIf="result.coverimage">
          <img
            class="image"
            src="http://localhost:3000/{{
              result.coverimage.replace('./assets/', '')
            }}"
            alt=""
            height="400px"
            width="250px"
            style="border: 1px solid red"
          />
        </div>

With above .replace('./assets/', '') we are removing the ./assets/ and repalcing it with '' empty space. So now URL is in this format http://localhost:3000/imagename.png .

Also I can remove safeurl pipe for now beacuse it is localhost ,but in prodction mod I will be needing that pipe. And It might happen that even with localhost somebody might need the pipe.

Also now I don't need the createImageFromBlob() function and the map or other array methode to extract all the images from subscribed data,and simply you can write your code like this to display the data

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

I hope I understood the things myself correctly and explained them correctly