如何以角度 2 呈现从 WebAPI 获取的图像答案

【问题标题】：How to render an image taken from WebAPI in angular 2如何以角度 2 呈现从 WebAPI 获取的图像
【发布时间】：2019-06-19 20:48:31
【问题描述】：

我正在从 WebApi 中的文件夹中获取图像并尝试在我的 Angular 应用程序中呈现它。这是从其文件夹中获取图像的网络服务代码：

[HttpGet]
[Route("GetProfileImage")]
[Authorize]
public IActionResult GetImage()
{
    try
    {
        var userId = User.Claims.First(c => c.Type == "UserID").Value;
        var photo = _applicationContext.files.FirstOrDefault(x => x.UserId == userId);
        var fileName = photo.FileName;
        var uploadFilesPath = Path.Combine(_iHostingEnvironment.ContentRootPath, "uploads");
        var filePath = Path.Combine(uploadFilesPath, fileName);

        return Ok(PhysicalFile(filePath, "image/jpeg"));
    }
    catch (Exception ex)
    {
        return BadRequest(ex.Message);
    }
}

这是后端调用 webapi 的代码：

component.ts

getProfileImage() {
    this.userService.getProfileImage()
        .subscribe((data: any) => {
        this.imageUrl = data.fileName;
        console.log(data.fileName);
  });
}

service.ts

public getProfileImage = () => {
    return this.http.get(this.baseUrl + '/api/ApplicationUser/GetProfileImage');
}

component.html

<div class="card-avatar" *ngIf="imageUrl">
    <a href="javascript:void(0)" >
        <img class="img" src="imageUrl" />
    </a>
</div>

当我 console.log 回复时，我会得到文件本身的物理位置，如下所示：

D:\backend\uploads\ca897a19-d8f6-4f77-8445-927c29f9f86d.jpg

但它没有呈现在我的 .html 文件中的 src 中。

你能告诉我如何正确地做吗？谢谢。

【问题讨论】：

您也可以只让 src 指向动作，即this.baseUrl + '/api/ApplicationUser/GetProfileImage'，并让它返回原始数据以供图像标签呈现

标签： angular asp.net-web-api

【解决方案1】：

试试这样：

<img class="img" [src]="imageUrl" />

或

<img class="img" src="{{imageUrl}}" />

【讨论】：

感谢您指出这一点。不幸的是，它并没有解决我的问题。我只是将其转换为字节并添加了 'data:image/jpeg;base64'
是的。这是另一种方法

【解决方案2】：

让动作在调用时返回原始图像数据

//GET api/ApplicationUser/ProfileImage
[HttpGet("ProfileImage")]
[Authorize]
public IActionResult GetImage() {
    try {
        var userId = User.Claims.First(c => c.Type == "UserID").Value;
        var photo = _applicationContext.files.FirstOrDefault(x => x.UserId == userId);

        if(photo == null) return NotFound();

        var fileName = photo.FileName;
        var uploadFilesPath = Path.Combine(_iHostingEnvironment.ContentRootPath, "uploads");
        var filePath = Path.Combine(uploadFilesPath, fileName);

        if(!System.IO.File.Exists(filePath)) return NotFound();

        return File(filePath, profile.jpg, "image/jpeg"));
    } catch (Exception ex) {
        return BadRequest(ex.Message);
    }
}

只需让组件使用它的路由/URL 调用操作。

component.ts

getProfileImage() {
    this.imageUrl = this.userService.getProfileImage();
    console.log(this.imageUrl);
}

service.ts

public getProfileImage = () => {
    return this.baseUrl + '/api/ApplicationUser/ProfileImage';
}

component.html

<div class="card-avatar" *ngIf="imageUrl">
    <a href="javascript:void(0)" >
        <img class="img" src="{{imageUrl}}" />
    </a>
</div>

浏览器在解析img.src 路径时应该按照设计的方式处理图像的实际下载和呈现。

【讨论】：

【解决方案3】：

component.html

<div class="card-avatar" *ngIf="imageUrl">
    <a href="javascript:void(0)" >
        <img class="img" src="{{imageUrl}}" />
    </a>
</div>

【讨论】：

请帮助消除 StackOverflow 是免费代码编写服务的误解，通过一些解释来增加您的纯代码答案。 - From Review

【解决方案4】：

您始终可以在 Base64 上转换图像并将其嵌入到 html 上。作为参考，你可以看到 ngx-网络摄像头

【讨论】：