ASP .NET MVC 5 - Exibindo imagens de um array de bytes

 Neste artigo vamos rever como exibir imagens em uma aplicação ASP .NET MVC 5 a partir de um array de bytes.

Já faz tempo que publiquei um artigo mostrando como exibir imagens na ASP .NET MVC. Veja o link: ASP .NET MVC 3 - Exibindo imagens - Macoratti.net

Pois é, já estamos em tempos de .NET Core e a ASP .NET MVC esta na sua versão 5. Mas para exibir imagens pouca coisa mudou.

Vamos rever então como realizar essa tarefa usando a ASP .NET MVC 5 e o VS 2017 Community.

Recursos Usados:

Criando o projeto ASP .NET MVC 5

Abra o VS 2017 Community e crie um projeto usando o template Web-> ASP .NET Web Application(.NET Framework) e informe o nome Mvc_ImagemArrayBytes;

A seguir marque o template MVC sem autenticação e clique em OK;

Criando a pasta Imagens e definindo duas imagens

Criei no projeto uma nova pasta chamada Imagens (Project -> New Folder) e inclui as imagens : andromeda.png e simplista.png

Criando os métodos Action

Vamos aproveitar a estrutura e os arquivos criados e incluir no controlador HomeController na pasta Controllers os seguintes métodos Action:

 public ActionResult GetImagemDoArrayBytes()
        {
            try
            {
                // caminho da imagem
                string imgPath = Server.MapPath("~/Imagens/simplista.png");
                // Converte a imagem em um array de bytes
                byte[] dadosByte = System.IO.File.ReadAllBytes(imgPath);
                //Converte o array de bytes para base64string   
                string imreBase64Dados = Convert.ToBase64String(dadosByte);
                string imagemDadosURL = string.Format("data:image/png;base64,{0}", imreBase64Dados);
                //Passando os dados da imagem para a viewbag
                ViewBag.DadosImagem = imagemDadosURL;
                //exibe a view
                return View();
            }
            catch
            {
                throw;
            }
        }

Explicando o código :

  1. Lemos a imagem da pasta Imagens para uma variável local imgPath;
  2. Convertemos a imagem em um array de bytes usando o método ReadAllBytes;
  3. Convertemos o array de bytes em formato de sequência de caracteres base 64 usando o método Convert.ToBase64String;
  4. Adicionamos os dados data:image/png;bae64 para que o navegador saiba que o atributo src contém dados da imagem;
  5. Atribuimos os dados ao ViewBag;
 public ActionResult GetImagem()
        {
            try
            {
                string path = Server.MapPath("~/Imagens/andromeda.png");
                byte[] imagemByteDados = System.IO.File.ReadAllBytes(path);
                return File(imagemByteDados, "image/png");
            }
            catch
            {
                throw;
            }
        }

Explicando o código :

Criando as Views

Clique com o botão direito no método Action GetImagemDoArrayBytes e escolha Add View;

Aceite usar o mesmo nome do método Action, o template Empty e a opção para usar a página de leiaute:

Defina o código abaixo na view : GetImagemDoArrayBytes.cshtml

@{
    ViewBag.Title = "Asp.Net MVC Exibindo imagem de um array de bytes";
}
<h1>Macoratti .net</h1>
<hr />
<h2>Asp.Net MVC - Imagem de um array de bytes</h2>
<hr />
<img src="@ViewBag.DadosImagem">

Na view acima a ViewBag contém os dados que são renderizados na tag image.

Repita o procedimento para o método Action GetImagem e defina o código abaixo na respectiva view : GetImagem.cshtml

@{
    ViewBag.Title = "Imagem de um array de bytes";
}
<h1>Macoratti .net</h1>
<h2>Imagem de um array de bytes</h2>
<hr />
<img src='@Url.Action("GetImagem", "Home")' />
 

Na view acima o atributo src da tag image aponta para /Home/GetImagem.

Teremos assim as duas views criadas na pasta Views/Home.

Alterando o Layout

Eu alterei o arquivo _Layout.cshtml que esta na pasta \Views\Shared as opções Imagem 1 e Imagem 2 no menu.

  ...
 <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Imagem 1", "GetImagemDoArrayBytes", "Home")</li>
                    <li>@Html.ActionLink("Imagem 2", "GetImagem", "Home")</li>
                </ul>
 </div>
...

Alterei também a view Index.cshtml para exibir os dados mostrados na página abaixo:

Executando a aplicação e clicando no menu Imagem 1 iremos obter o seguinte resultado :

Retornando ao menu e clicando em Imagem 2 teremos o resultado abaixo:

Temos assim duas maneiras bem simples de exibir imagem diretamente em uma aplicação ASP .NET MVC 5.

Pegue o projeto completo aqui :  Mvc_ImagemArrayBytes.zip (sem as referências)

Disse-lhe Jesus: Eu sou o caminho, e a verdade e a vida; ninguém vem ao Pai, senão por mim.
João 14:6

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti