Search code examples
angularasp.net-web-apiangular10

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


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

API Response

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

Solution

  • 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.