时间戳

首页 > 解决方案 > API 返回图像路径，但图像未在 Angular 10 中显示

angular - API 返回图像路径，但图像未在 Angular 10 中显示

问题描述

我的 API 返回属于产品的图像路径，但我的 Angular 应用程序没有显示图像。

API 响应

HTML 代码

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

跨域读取阻塞 (CORB) 阻止了 MIME 类型为 text/html 的跨域响应 https://localhost:44349/。有关详细信息，请参阅https://www.chromestatus.com/feature/5629709824032768 。

上面的消息显示如果我添加如下

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

标签： angularasp.net-web-apiangular10

解决方案

我解决了这个问题。以下是我解决问题的方法。

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

我使用 [src] 标签而不是 src 标签。

推荐阅读