Imagem não aparece em página de blog feito em NextJS com WPGraphQL

[ricardo-ramos]

Olá a todo mundo! Estou com outra dúvida no projeto que estou fazendo, usando NextJS para criar um site com uma parte de blog em Wordpress, por meio do WPGraphQL, e preciso de apoio em uma parte específica. Vamos lá...

Eu consegui puxar a imagem destacada quase sem problemas, quebrei um pouco a cabeça, mas deu certo. O resultado, o código e a query ficaram da seguinte forma (em tempo: imagem meramente pra testar, foi a primeira ideia que me veio na cabeça, o site não é sobre Pokemon hahahahaha):

Só que tentei puxar a mesma imagem no post em si e não foi... Ela aparece quando visualizo o post a partir do template genérico do admin do WordPress, mas não no localhost:3000/post/[aqui seria o título do post em slug] que estou usando. O restante tá normal, texto e tags sem nenhum problema. A seguir, o mesmo esquema: resultado, código e query que estou usando:

Tentei usar o {post.featuredImage?.node.sourceUrl} por, até onde entendi, seguir a mesma base, tentei pensar outras formas de fazê-lo para chegar até a imagem, sem sucesso... Alguém poderia ajudar a apontar onde estou errando, por favor? Desde já, muito agradecido!!

[felquis]

Onde está o erro eu não sei, mas eu começaria verificando qual é o retorno de {post.featuredImage?.node.sourceUrl} para ver se tem uma string ou se é null ou undefined.

Se tiver uma string, verificaria se a imagem está de fato sendo servida através da url ou de outra url.

[ricardo-ramos]

Opa, brigadão pela resposta! Olhei aqui e tá retornando da seguinte forma:

No endereço, depois do localhost e do nome do site, vem um /wp-content/uploads/2022/03/ (imagem não é local, subi pela imagem destacada no admin do Wordpress). No excerpt, quando mostra a lista de posts, aparece normalmente da mesma forma, mas não no texto do blog em si (quando clica pra ler o texto, ele sai da página blog e vai pra localhost:3000/post/[aqui seria o slug do post específico]), será que isso tem algo a ver?

[felquis]

(imagem não é local, subi pela imagem destacada no admin do Wordpress)

A imagem não é local? Mas o endereço retornado começa com localhost 🤔

Será que a base da url está incorreta?
Qual URL deveria ser para que a imagem seja carregada corretamente?

[ricardo-ramos]

Sobre as imagens não serem locais, é bem possível que eu tenha falado besteira, perdão... Eu instalei o Wordpress aqui e acesso o painel por meio de localhost/nomedosite/wp-admin e defino a imagem destacada nas opções de edição do post no Wordpress... Vi aqui que, quando faço o upload do post, ele inclui arquivos de diversos tamanhos relacionados à mesma imagem (não sei se tem algo a ver com as regras de CSS diferentes que especifiquei para cada área) na minha pasta local nome do site/wp-content/uploads/ano do post/mês do post.

Para fazer um teste, deletei as imagens de alguns posts que fiz em março e notei que elas não aparecem mais. Até aparece a imagem destacada nas opções de imagens que subi anteriormente pelo admin, mas ela não aparece de jeito nenhum. Se eu substituir por outra, o post volta ter imagem, mas continua não funcionando a imagem para o post completo em si, apenas para o preview, onde aparece a opção de clicar "saiba mais".

É possível que tenha ficado confuso, mas tentei explicar da melhor forma possível o que percebi por hora... Se ficar, tento fazer um vídeo de captura de tela pra mostrar a situação atual. Perdão pelo incômodo. :(

[felquis]

Compreendo, não conheço a plataforma que vc está codando.

Então eu iria fazer o debug pelos princípios:

• qual url está me sendo entregue
• ela não funcionar
• a URL quais partes dela faz sentido e quais não faz?
• o que deveria mudar na url para que ela passasse a funcionar.

Dessa forma, procuraria o que deve mudar na url para funcionar.

Essas são as dicas que consigo te dar, boa sorte. Caso resolva, lembre-se de informar aqui como foi resolvido (com o código) para ajudar outras pessoas.

Caso não consiga resolver, espero que outra pessoa possa conseguir te dar uma dica melhor que a minha.

[ramonmetzker]

@ricardo-ramos Fala, Ricardo! Cara, o ideal para pegar a url da imagem pelo WPGraphQL é no mediaItemUrl ao invés de sourceUrl, talvez isso resolva para você