Как сделать изображение, полученное из WebAPI в угловых 2

Question

Я извлекаю изображение из папки в WebApi и пытаюсь отобразить его в своем угловом приложении.Это код веб-службы для получения изображения из его папки:

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

Когда я утешаю.Записав ответ, я получаю физическое местоположение самого файла примерно так:

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

но это не рендеринг в моем src в файле .html.

Подскажите пожалуйста, как это сделать правильно.Спасибо.

Answer 1

Действие возвращает исходные данные изображения при вызове

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

Answer 2

Попробуйте так:

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

или

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

Answer 3

Попробуйте вернуть только путь к изображению, а не физический путь.

return Ok(filePath);

Тогда читайте вот так

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

или

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

Answer 4

Вы всегда можете конвертировать изображение в Base64 и вставлять его в HTML.Для справки вы можете увидеть ngx-webcam

Answer 5

component.html

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