How to display image received by a Web API on Angular

Question

I have an image that the image data's coming from database through the web api. This image's path saves in DB's imagePath column. However when I call this data via the web api I onle get this path value. So if I want to show an image with that path I will exactly get 404 error. The point that I don't understand how to show this image on UI. Angular is working on different port and the backend also working on different port. If I get the images by using backend url/port it wouldn't good in terms of seo. How can I solve this problem?

I am using C# & .Net Core 3.1 and Asp.Net Web Api on the backend.

Car Component Codes

getCars(){
this.carService.getCars().subscribe(response => {
  this.cars = response.data;
  this.dataLoaded = true;
  this.setCoverImage(this.cars);
});
}  
getCarImages(){
      this.carImageService.getCarImages().subscribe(response => {
          this.carImages = response.data;
        })
      }


 setCoverImage(carList: Car[]){
     carList.forEach(item => {
       this.carImageService.getCarImagesById(item.carId).subscribe(response => {
         item.imagePath = "http://localhost:4200/" + response.data[0].imagePath;
       })
      })
    }

Car Image Service Codes

export class CarImageService {
  apiUrl = "https://localhost:44327/api/";
  constructor(private httpClient : HttpClient) { }

  getCarImages() : Observable<ListResponseModel<CarImage>>{
    let newPath = this.apiUrl + "carimages/getall";
    return this.httpClient.get<ListResponseModel<CarImage>>(newPath);
  }

  getCarImagesById(carId: number) : Observable<ListResponseModel<CarImage>>{
    let newPath = this.apiUrl + "carimages/getimagesbycarid?id=" + carId;
    return this.httpClient.get<ListResponseModel<CarImage>>(newPath);
  } 
}

API output

You should look at other questions asked about similar problems: [return an image using ASP.NET Web API and display it?](https://stackoverflow.com/q/41520039/215552), [Webapi return binary image to be displayed using jquery Ajax method](https://stackoverflow.com/q/23851685/215552), [Show image in ajax from FileResult Handler (Action)](https://stackoverflow.com/q/55981794/215552) — Heretic Monkey, Mar 15 '21 at 19:43
@HereticMonkey thank you for your comment. I am a newbie in this world, so many times i can't find anything about my problem. However I exemined some topic about this but I couldn't solve this problem. I also browsed your links when I saw your comment but I guess these aren't related about my problem. And I solved the problem with using proxy. Thank you again. — ATK, Mar 15 '21 at 20:05

score 1 · Accepted Answer · answered Mar 15 '21 at 19:21

1

You can use proxy in your client app.

Example from my project :

{
  "context": [ "/images" ], 
  "target" : "http://localhost:5000", 
  "secure": false, 
  "changeOrigin": true, 
  "logLevel": "debug"
}

With this json proxy configuration I can get files from images folder which is at wwwroot directory.

answered Mar 15 '21 at 19:21

tmsbrndz

1,297
2
9
23

Thank you so much, I applied your advice and its work for me. I am a newbie on this world and sometimes it is a bit harder to find solution for me. – ATK Mar 15 '21 at 19:56

score 0 · Answer 2 · answered Mar 15 '21 at 19:32

I don't think its safe or good approach.

The best possible solution is to fetch the image as byte array from your API like

var byteArrImg = File.ReadAllBytes("images/13561.jpg"); var base64Img = Convert.ToBase64String(byteArrImg);

In your client side code property bind the src property of Image tag to show the image

setCoverImage(carList: Car[]){
     carList.forEach(item => {
       this.carImageService.getCarImagesById(item.carId).subscribe(response => {
         item.imagePath = response;
       })
      })
    }

In html

<image
[src]="item.imagePath"
/>

This might be better way than my codes. I am already learning this interesting world so sometimes I don't know which way is the best. I'll note, thanks for the help. — ATK, Mar 15 '21 at 19:53

How to display image received by a Web API on Angular

2 Answers2