Двоичное изображение не может отображаться в представлении asp.net core 2.x

Question

Я загружаю изображение в таблицу в формате byte[]. Моя проблема в том, что когда я получаю это на виде, изображение не будет отображаться.

модель

{
   public byte[] image {get; set;}
}

контроллер

public async Task<IActionResult> Create(Profile profile, IFormFile image)
{
    if (ModelState.IsValid)
    {
        using (var memoryStream = new MemoryStream())
        {
            image.CopyTo(memoryStream);
            profile.image = memoryStream.ToArray();
        }

        _context.Add(image);
        await _context.SaveChangesAsync();
        return RedirectToAction(nameof(Index));
    }

    return View(image);
}

Посмотреть

<img src="@item.image" />

Answer 1

Вы не можете просто вывести массив байтов в качестве источника тега изображения HTML. Это должен быть URI. Обычно это означает, что вам нужно действие, которое извлекает данные изображения из базы данных и возвращает их в виде файла:

[HttpGet("profileimage")]
public async Task<IActionResult> GetProfileImage(int profileId)
{
    var profile = _context.Profiles.FindAsync(profileId);
    if (profile?.image == null) return NotFound();

    return File(profile.image, "image/jpeg");
}

Затем вы можете сделать что-то вроде:

 <img src="@Url.Action("GetProfileImage", new { profileId = item.Id })" />

Кроме того, вы можете использовать Data URI. Однако это приведет к тому, что все данные об изображении будут включены в ваш HTML-документ, что увеличит общее время загрузки документа и задержит рендеринг. Кроме того, URI данных должны быть в кодировке Base64, что эффективно увеличивает размер изображения примерно в 1,5 раза. Для небольших простых изображений это не так уж сложно, но вы должны избегать такого подхода при использовании больших изображений. В любом случае, выполнение этого будет выглядеть примерно так:

<img src="data:image/jpeg;base64,@Convert.ToBase64String(item.image)" />