Imagem em base 64 no componente p-galleria

Front-end
#1

Assim funciona:

this.images = [
        {
          previewImageSrc:
            'https://www.primefaces.org/primeng/showcase/assets/showcase/images/galleria/galleria9.jpg',
          thumbnailImageSrc:
            'https://www.primefaces.org/primeng/showcase/assets/showcase/images/galleria/galleria9s.jpg'
          alt: 'Description for Image 1',
          title: 'Title 1',
        },
        {
          previewImageSrc:
            'https://www.primefaces.org/primeng/showcase/assets/showcase/images/galleria/galleria10.jpg'
          thumbnailImageSrc:
            'https://www.primefaces.org/primeng/showcase/assets/showcase/images/galleria/galleria10s.jp'
          alt: 'Description for Image 2',
          title: 'Title 2',
        },
      ];

Assim não funciona:

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

O que não funciona a imagem está em base64.

Não achei exemplos deste componente usando imagens com base64.

O que pode ser feito ?

#2

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

1 curtida
#3

Não entendi.

#4

Alguma ajuda por aqui ???

#5

Dá uma pesquisada

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

1 curtida
#6

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

#7

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.

image

O que pode ser ?

#8

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

1 curtida
#9

Vem assim:

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

`

#10

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

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

image
image.png1054×968 169 KB

#11

Então muda pra ser por url.

1 curtida
#12

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

#13

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" />
1 curtida
#14

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.

#15

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

1 curtida
#16

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

#17

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

1 curtida
#18

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

#19

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.

1 curtida
#20

Então fiz o exemplo que colocou aqui.

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

image

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
image.png1486×886 90.8 KB

Aonde estou errando ?