Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Retornar uma imagem com angular e spring boot

Boa tarde estou em uma aplicação e estou precisando buscar uma imagem que esta no bando de dados para mostrar no angular na tabela.

pra fazer o upload dela pro servidor eu já consegui, e está anotada com o valor blob...

Andei pesquisando e uma das formas é converter o blob em um file para mostrar na tabela no algular, porém acho que a conversão já está certo.

listarTodos(codigo: any): Observable<any> {
    return this.httpClient.get<any>(`${this.baseUrl}/${codigo}`, {headers: this.adicionarHeaders()})
      .map(response => {
        let arquivo = response;
        for (let i = 0; i < response.length; i ++) {
            arquivo[i].arquivo = new File([arquivo[i].arquivo], arquivo[i].nomeArquivo);
            console.log(arquivo[i].arquivo);
        }        
        return arquivo;
      });
  }

Aqui estou convertendo o blob em um file, não sei se está correto...

mas quando tento agora fazer isso no meu table no angular

<form #inputFormulario="ngForm" (ngSubmit)="pesquisar()">
    <p-fieldset legend="Listar Arquivos">
        <div class="ui-g">
            <div class="ui-g-12 ui-md-12 ui-fluid">
                <p-table [value]="arquivos" [responsive]="true" [rows]="30" [paginator]="true">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>#</th>
                            <th>Arquivo</th>
                            <th>Nome</th>
                            <th>Data</th>
                            <th>Descricao</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-a>
                        <tr>
                            <td>{{a.codigo}}</td>
                            <td>
                                <img [src]="a.arquivo"/>  // aqui estou chamando o minha imagem convertida
                            </td>   
                            <td>{{a.nomeArquivo}}</td>
                            <td>{{a.data}}</td>
                            <td>{{a.descricao}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>
    </p-fieldset>
</form>

mais isso me retorna erro 404 que não é encontrado.

GET http://localhost:4200/[object%20File] 404 (Not Found)

Oque estou errando? é a conversão? Obrigado

3 respostas
solução!

Fala aí Michel, tudo bem? Bom, vamos lá:

Você realmente não vai conseguir passar um File para o atributo src, você precisa criar uma URL para representar seu blob, isso pode ser feita utilizando o URL.createObjectURL(blob). o retorno será uma URL que pode ser utilizada no src, algo do tipo:

listarTodos(codigo: any): Observable<any> {
    return this.httpClient.get<any>(`${this.baseUrl}/${codigo}`, {headers: this.adicionarHeaders()})
        .map(response => {
            let arquivo = response;
            for (let i = 0; i < response.length; i ++) {
                arquivo[i].arquivo = URL.createObjectURL(arquivo[i].arquivo);
                console.log(arquivo[i].arquivo);
            }        
            return arquivo;
        });
  }

Obs: Olhando o seu código, acredito que o arquivo[i].arquivo seja o blob.

Espero ter ajudado

Opa muito bom Matheus, obrigado pelo caminho dado, depois irei tentar... forte abraço

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.