Blazor - Lendo/exibindo imagens da pasta wwwroot

Hoje veremos como ler e exibir arquivos de imagens (recursos estáticos) a partir da pasta wwwroot em um projeto Blazor Server.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Hoje veremos como exibir recursos estáticos a partir de um projeto Blazor Server.

Recursos usados:

Criando o projeto no VS Community 2019

Abra o VS 2019 Community (versão mínima 16.5) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_LeArquivos, a localização e clique em Create;

Selecione a opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.

Clique no botão Create para criar o projeto.

Com o projeto criado vamos fazer as seguintes alterações e ajustes:

Exclua os arquivos abaixo e suas referências:

Vamos aproveitar apenas o arquivo Index.razor.  

A seguir inclua no arquivo _Imports.razor o namespace System.IO.

Crie uma pasta imagens dentro da pasta wwwroot e copie algumas imagens que deseja exibir.

No arquivo NavMenu.razor da pasta Shared defina apenas um item de menu conforme abaixo:

...
 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
       <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Ler Arquivos
             </NavLink>
       </li>
    </ul>
</div>
...

Ajustando o componente Index.razor para ler e exibir as imagens

Abra o arquivo Index.razor substitua o código existente pelo código abaixo:

@page "/"

    <div class="row border-0">
        <div class="col-md-3">
            <button class="btn btn-primary" @onclick="CarregaImagens">Carregar Imagens</button>
            @if (listaArquivos != null && listaArquivos.Count > 0)
            {
                int contador = 0;
                @foreach (string arquivo in listaArquivos)
                {
                    contador++;
                    <br />
                    <span>@contador</span>
                    <span @onclick="@(e=> LerArquivo(arquivo))" style="cursor:pointer;text-decoration:underline;color:blue;">@arquivo</span>
                }
            }
        </div>
        <div class="col-md-9">
            <h2>Imagem :  @nomeImagem</h2>
            <div>
                <img src="@imagem" asp-append-version="true" style="width:800px;height:600px;" />
            </div>
        </div>
    </div>

@code{
    string imagem = "";
    string nomeImagem = "nenhum";

    List<string> listaArquivos = new List<string>();

    string path = $"{System.IO.Directory.GetCurrentDirectory()}{@"\wwwroot\imagens"}";

    public void CarregaImagens()
    {
        var arquivos = System.IO.Directory.GetFiles(path);
        foreach(var arq in arquivos)
        {
            listaArquivos.Add(Path.GetFileName(arq));
        }
    }

    public void LerArquivo(string nomeArquivo)
    {
        nomeImagem = nomeArquivo.Split('.')[0];
        imagem = "/imagens/" + nomeArquivo;
    }
}

Vamos entender o código acima:

No código de marcação definimos um botão de comando que vai chamar o método CarregaImagens():

  <button class="btn btn-primary" @onclick="CarregaImagens">Carregar Imagens</button>

O método CarregaImagens() vai obter os arquivos a partir do caminho (path) e preencher uma lista de arquivos definidos em listaArquivos :

     List<string> listaArquivos = new List<string>();
    string path = $"{System.IO.Directory.GetCurrentDirectory()}{@"\wwwroot\imagens"}";

    public void CarregaImagens()
    {
        var arquivos = System.IO.Directory.GetFiles(path);
        foreach(var arq in arquivos)
        {
            listaArquivos.Add(Path.GetFileName(arq));
        }
    }

A seguir percorremos a lista de arquivos e invocamos o método LeArquivo() que vai exibir o nome a obter a imagem:

  @if (listaArquivos != null && listaArquivos.Count > 0)
  {
       int contador = 0;
       @foreach (string arquivo in listaArquivos)
       {
         contador++;
         <br />
         <span>@contador</span>
         <span @onclick="@(e=> LerArquivo(arquivo))"
style="cursor:pointer;text-decoration:underline;color:blue;">@arquivo</span>
        }
  }

Método LeArquivo():

   public void LerArquivo(string nomeArquivo)
    {
        nomeImagem = nomeArquivo.Split('.')[0];
        imagem = "/imagens/" + nomeArquivo;
    }

Executando projeto iremos obter o resultado a seguir:

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

"Ninguém jamais viu a Deus; se nos amamos uns aos outros, Deus está em nós, e em nós é perfeito o seu amor.
Nisto conhecemos que estamos nele, e ele em nós, pois que nos deu do seu Espírito.
E vimos, e testificamos que o Pai enviou seu Filho para Salvador do mundo."
1 João 4:12-14
 


Referências:

José Carlos Macoratti