API return 图片路径但图片未显示在 Angular 10

Question

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

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>

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.

如果我像下面这样添加，上面的消息会显示

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

Answer 1

您只能对某些文件类型进行跨域请求 - 我认为图像是允许的 - 但似乎图像的 MIME 类型在服务器上设置不正确，因此它认为您正在进行跨域请求 HTML 文件，这是不允许的 - 如果您拥有服务器，则修复 MIME 类型。

如果没有，那么您将不得不绕过跨域请求 (CORS)。为此，您需要向同一个域服务器（或具有允许您进行跨域请求的 CORS 策略的不同域服务器）发出图像的后端请求，然后您的服务器为您获取图像和returns吧。这将起作用，因为 CORS 仅由浏览器强制执行。

或者，您可以将 Web 服务器配置为使用 URL 重写/代理。基本上，您从普通域（不受 CORS 限制）请求图像，然后您的网络服务器重写请求并从另一个域获取它。您的浏览器 none 更聪明，并认为它来自您的域。

Answer 2

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

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

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

API return 图片路径但图片未显示在 Angular 10

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

angular

asp.net-web-api

angular10