时间戳

首页 > 解决方案 > 图像未以角度显示

angular - 图像未以角度显示

问题描述

当我从邮递员测试我的 API 时，我可以查看我的图像，但从我的角度应用程序中，我无法查看图像。控制台中没有错误。下面是我尝试过的代码。

ASP.NET 网络 API 2

    [HttpGet]
        [AllowAnonymous]
        [Route("api/another")]
        public HttpResponseMessage GetFile(int productId)
        {
            HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);

            IEnumerable<ProductImage> files = _context.ProductImages.Where(p => p.ProductId == productId);
            foreach (var item in files)
            {
                response.Content = new ByteArrayContent(item.Image);
                response.Content.Headers.ContentLength = item.Image.LongLength;

                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
                response.Content.Headers.ContentDisposition.FileName = item.Name;

                response.Content.Headers.ContentType = new MediaTypeHeaderValue(item.ContentType);
            }
            return response;
        }

HTML

<div *ngFor="let img of imageData">
  <img [alt]="img.Name" [src]="img.Image">
</div>

组件.ts

 imageData: any[] = [];

  getImages() {
   this.image.getProduct().subscribe(res => {
   this.imageData = [res];
   console.log(res);
  });
 }

服务.ts

  getProduct() {
    return this.http
      .get(this.apiUrl + 'another?' + 'productId=' + 2, {responseType: 'blob'})
      .pipe(
        retry(2),
        catchError(this.handleError),
      );
  }

控制台日志输出

标签： angularasp.net-web-apiangular11ng-file-upload

解决方案

仔细检查您的 api 响应以查看它返回的内容。

您需要 src 为“data:image/jpg;base64, [your byte array]”

<img src="data:image/jpg;base64, [your byte array]">

从字节数组中设置 img src

推荐阅读