[Fixed] How to display image received by a Web API on Angular


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

this.carService.getCars().subscribe(response => {
  this.cars = response.data;
  this.dataLoaded = true;
      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 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.

Leave a Reply

(*) Required, Your email will not be published