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

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

0 голосов
/ 02 октября 2018

Я загружаю изображение в таблицу в формате 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" />

1 Ответ

0 голосов
/ 02 октября 2018

Вы не можете просто вывести массив байтов в качестве источника тега изображения 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)" />
...