API return image path but image is not showing in Angular 10

Question

My API returns the image path which belongs to the product but my angular application is not showing the image.

HTML Code

    <ng-container *ngFor="let prod of productData">
      <div class="row p-2 bg-white border rounded" style="margin-bottom: 10px;">
        <div class="col-md-3 mt-1">
               <img class="img-fluid img-responsive rounded product-image"
               src="{{prod.ProductImages.ImagePath}}"
               [alt]="prod.ProductImages.Name">
        </div>
        <div class="col-md-6 mt-1">
          <h5>{{prod.Name}}</h5>
          <div class="mt-1 mb-1 spec-1">
            |<span> {{prod.Shape.Name}}</span>
            |<span class="dot"></span><span> {{prod.StoneType.Name}}</span>
            |<span class="dot"></span><span> {{prod.Color.Color1}}<br></span>
          </div>
          <div class="mt-1 mb-1 spec-1"><span>{{prod.Supplier.Name}}</span></div>
          </div>
        <div class="align-items-center align-content-center col-md-3 border-left mt-1">
          <div class="d-flex flex-row align-items-center">
            <h4 class="mr-1">{{prod.SellingPrice | currency:'RS: '}}</h4>
          </div>
          <div class="d-flex flex-column mt-4">
            <button class="btn btn-primary btn-sm" type="button" (click)="editProduct(prod.Id)">Details</button>
            <button class="btn btn-outline-primary btn-sm mt-2" type="button">Add to wishlist</button>
          </div>
        </div>
      </div>
    </ng-container>

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://localhost:44349/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Above msg is showing if if i added like below

<img class="img-fluid img-responsive rounded product-image"
           src="https://localhost:44349/{{prod.ProductImages.ImagePath}}"
           [alt]="prod.ProductImages.Name">

If you opened the path in your browser can you see the image working ? please put the full URL here as well — Wasim Nabil
– Wasim Nabil, Commented Aug 4, 2021 at 17:17
@WasimNabil Then it showing a warning msg I attach that msg also — Mervin
– Mervin, Commented Aug 4, 2021 at 17:21
The image works if you opened localhost:44349/Images/Product/6ycFZe.jpg in your browser URL ? not loading it in the app — Wasim Nabil
– Wasim Nabil, Commented Aug 4, 2021 at 17:34

Mervin · Accepted Answer · 2021-08-05 14:03:24Z

1

I fixed the issue. below is the way I fixed the issue.

    <img class="img-fluid img-responsive rounded product-image"
               [src]="'https://localhost:44349/'+prod.ProductImages[0]?.ImagePath"
               alt="{{prod.Name}}">

I used [src] tag instead of src tag.

answered Aug 5, 2021 at 14:03

Mervin

351 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pieterjan Over a year ago

And does it also work when using [src]="prod.ProductImages[0]?.ImagePath"?

Mervin Over a year ago

@Pieterjan I didn't try that

R. Richards · Accepted Answer · 2021-08-09 22:32:09Z

You can only make cross domain requests for certain file types - I think images are allowed - but it seems that the MIME type for the image has been set incorrectly on the server and thus it thinks you are making a cross domain request for an HTML file, which is not allowed - if you own the server then get the MIME type fixed.

If not, then you will have to bypass cross domain requests (CORS). To do this, you will need to make a backend request for the image to your same domain server (or to your different domain server with a CORS policy that allows you to make cross domain requests) AND THEN your server gets the image for you and returns it. This will work because CORS is only enforced by the browser.

Alternatively, you can configure your web server to use URL rewriting / proxying. Basically, you request the image from your normal domain (not restricted by CORS) and then your webserver rewrites the request and gets it from another domain. Your browser is none the wiser and thinks it came from your domain.

Collectives™ on Stack Overflow

API return image path but image is not showing in Angular 10

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related