CODEWITHSUNDEEP
htmlangularfilenestjs
M Nouman
M Nouman

Reputation: 591

how to display images from nestjs server to Angular

When I upload a product from Angular side, It Post the product with imagepath, and the image is getting stored in the NestJs folder also, but I can not display product with it's image. The product is displaying at frontend but without it's image that is referenced and saved at the backend.

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);
        });
      }

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

This is the information of the Product that is coming from the backend enter image description here

And when I try like this src="{{result.coverimage}}" or [src]="result.coverimage" I got error localhost:4200/assets/imagename not found(404). well that is obvoius!. because there is not such path, 4200 is for Angular. but I'm uploading the images at the backend assets folder which is located at localhost:3000/assets/, and we always upload files to backend for dynamic approach from database enter image description here

Upvotes: 1

Views: 1685

Answers (2)

M Nouman
M Nouman

Reputation: 591

If you are struggling to display the images coming from server, like I was, or you are struggling with the data that is coming NestJs. Then this might work for you as it worked for me.

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 preset 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="result.coverimage">
          <img
            class="image"
            src="http://localhost:3000/{{ result.coverimage }}"
            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. 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 urlhttp;//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/', '')
            }}"

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

Upvotes: 0

onrails
onrails

Reputation: 859

In your highlighted part of your post you ask how to display the image, i.e you suspect the problem is in the frontend. However there is a missing part from the provided context. In the line where the html magic happens (The img tag src attribute).

There you are string interpolating a property called coverimage under the results object. We do not see what is inside the coverimage from your backend response in the frontend screenshot. If it is an id of a document then it will not be parsed correctly. The src attribute accepts: APNG, AVIF, GIF, JPEG, PNG, SVG, and WebP. Or base64 (which seems not the case here).

When you have the image with one of the acceptable supported formats as stated in MDN correct you can map the property to the src attribute either via

1- string interpolation:

<img src="{{imagePath}}" />

2- property binding:

<img [src]="imagePath" />

The second way is more popular, but both work fine.

PS: it is a best practice and accessibility recommended to populate the alt="" property

Upvotes: 1

Related Questions