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