Imagem em base 64 no componente p-galleria

Isso é só uma estrutura de dados. Depende de como os dados estão sendo usados no HTML.

Não entendi.

Alguma ajuda por aqui ???

Dá uma pesquisada

https://www.google.com/search?q=primeng+p-galleria+base64

Eu pesquisei, mas não desta maneira. Valeu e vou testar.

Fiz assim:

Código TS

httpReturn.forEach((element: any) => {
        this.images.push({
          source: 'data:' + element.contentType + ';base64,' + element.arquivo,
        });
      });

Código HTML

<p-galleria [value]="images" [numVisible]="10"> </p-galleria>

Mas não aparece nada.

O que pode ser ?

Depende do que vem nas suas variáveis. Imprime no console a string completa e compare se fica igual ao exemplo da pesquisa:

Vem assim:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArEAAANqCAIAAAAVNoQiAAD//0lEQVR42uy9CbxlV1klfub5nDu/92quSkgIBJJIIERIAIkQCEhLGNJMigrSTtAKotCoiK0IatMOYAOCijIKiA1EQBMCYQxhSMhQSSBJperVm+5w7pnn81/7fpVrtd3+tVs00175/W6du8++557h5q317f19a4sCBwcHBwcHB4cgiPf0CXBwcHBwcHDcK8A1AQcHBwcHBwcD1wQcHBwcHBwcDFwTcHBwcHBwcDBwTcDBwcHBwcHBwDUBBwcHBwcHBwPXBBwcHBwcHBwMXBNwcHBwcHBwMHBNwMHBwcHBwcHANQEHBwcHBwcHA9cEHBwcHBwcHAxcE3BwcHBwcHAwcE3AwcHBwcHBwcA1AQc …

`

QUando coloquei o retorno em uma variável e mostrei no html: funcionou:

<img src="{{ imagem }}" />

image.png1054×968 169 KB

Então muda pra ser por url.

Mas como faço isso, pois a estrutura da imagem tem que estar no banco de dados

vc ja tentou um base64 pequeno? pra ver se realmente ta funcionando (se o problema não são suas imgs)?

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Então, não deve ser minha imagem, pois aqui, ela imprime na tela: Imagem em base 64 no componente p-galleria.

E o usuário faz o upload delas.

mas ali em cima imprimiu a url dessa img, não é?

A base 64 da imagem que veio do backend, conforme imagem:

ué, se ta funcionando com o base64, qual o problema então?

O problema, que não está funcionando no componente p-galleria, conforme está no título.

Ao invés de ficar convertendo pra base64 em string, retorna o binário em byte[]. Assim sua requisição/url vai retornar direto o binário da imagem para o browser interpretar diretamente sem conversões.

Então fiz o exemplo que colocou aqui.

Ele retorna a URL, Mas não funciona, porque não sei como chamar esta url.

TypeScript

<p-galleria [value]="images" [numVisible]="10"> </p-galleria>

httpReturn.forEach((imagem: any) => {
        this.images.push({
          source: imagem.url,
        });
});

Pois entendi que a URL que ele monta não é a imagem em si. e sim que chama um endpoint.

Quando eu chamo este endpoint, retorna isso:

image.png1486×886 90.8 KB

Aonde estou errando ?

Testa a url direto no navegador, onde vai ser usado de fato.

Está URL http://localhost:8101/modulo-tomador-api/api/tomador-arquivo/arquivo/7 ?

Sim, vê o que o navegador responde. Se der erro pega a mensagem na aba Network do navegador.