Renderizar imagem com p:graphicImage

Programação Java
, , ,
#1

Boa noite galera, estou com um problema, até que comum para a comunidade, mas não encontrei nenhum tópico que pudesse me ajudar.
Seguinte, tenho algumas imagens no meu projeto, que pode ser acessadas diretamente pela aplicação (pois não há necessidade de armazená-las no banco de dados) tenho na minha pasta ‘resources’ uma pasta chamada ‘images’ onde guardo todas essas imagens.
Estou utilizando ui:composition para montar as páginas do site, criei uma área para o cabeçalho e para o menu e outra para o corpo da página. Quando acesso a primeira página do site (index.xhtml) todas a imagens são carregadas corretamente (se eu utilizar a tag ), mas quanto mudo de página (acessando por meio de algum item do menu) a página seguinte carrega corretamente o CSS mas não carrega as imagens do cabeçalho.
Notei que, quando mudo de página, todo o html é carregado com o “contexto” da página atual, sendo assim, o browser não localiza as imagens na pasta correta.
Então:

  • Como posso carregar as imagens de forma correta utilizando meu ManagedBean acessando a pasta de imagens do site?
  • Como faço para utilizar o <p:graphicImage> para exibir essas imagens?

Seguem códigos:
Layout:

<h:head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Portal da IBRV - Igreja Batista Rio de Vida" />
    <meta name="keywords" content="IBRV, igreja, batista, rio, vida, igreja batista rio de vida, Jesus Cristo, Jesus, Cristo, fé, missão, missões, amor, Deus, Espírito Santo, salvação, cura, libertação" />
    <meta name="robots" content="noindex, nofollow" />

    <title>IBRV - Igreja Batista Rio de Vida</title>

    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link href='https://fonts.googleapis.com/css?family=Mukta Malar' rel='stylesheet' />

    <h:outputStylesheet library="css" name="portal.css" />
</h:head>

<h:body>
    <main>
        <header id="topo">

            <span id="mnuLogo">
                <a id="imgLogo" href="/portal">
                    <img src="../resources/images/logotipos/logo_ibrv.jpg" alt="Logotipo da IBRV" />
                </a>
            </span>
            <div id="redesSociais">
                <a href="https://www.youtube.com/channel/UCGA3dmNiq5dZQkZDgr9Yz1A" title="Inscreva-se no Youtube" target="_blank">
                    <img src="../resources/images/logotipos/logo_youtube.png" alt="Youtube" />
                </a>
                <a href="https://pt-br.facebook.com/ibriodevida/" title="Encontre-nos no Facebook" target="_blank">
                    <img src="../resources/images/logotipos/logo_facebook.png" alt="Facebook" />
                </a>
                <a href="https://www.instagram.com/ibriodevida/" title="Siga-nos no Instagram" target="_blank">
                    <img src="../resources/images/logotipos/logo_instagram.png" alt="Instagram" />
                </a>
                <a href="https://twitter.com/ibriodevida/" title="Siga-nos no Twitter" target="_blank">
                    <img src="../resources/images/logotipos/logo_twitter.png" alt="Twitter" />
                </a>
            </div>

        </header>

        <h:form id="frmPrincipal" lang="pt-BR" acceptcharset="utf-8">
            <p:menubar model="#{portalVisao.model}" />

            <ui:insert name="body">
            </ui:insert>
        </h:form>

        <footer>
            <hr />
            <p>Igreja Batista Rio de Vida - IBRV</p>
            <p><small>Copyright 2018 - Igreja Batista Rio de Vida. Todos os direitos reservados.</small></p>
        </footer>

    </main>
</h:body>

Index:

<ui:composition template="tema/portal.xhtml">

    <ui:define name="body">
        <article>
            <section id="sobre">
                <img id="imgSobre" alt="" src="resources/images/portal/cascata.jpg" />
            </section>
        </article>
    </ui:define>

</ui:composition>

Desde já agradeço a ajuda de todos.

#2

Boa tarde, posta o código das paginas.

#3

@Mike, adicionei o código das páginas no corpo do post.

#4

Para utilizar o p:graphicImage só fazer assim:

//pasta dentro de resources
<p:graphicImage library="images/logotipos" name="logo_ibrv.jpg" ></p:graphicImage>

<p:graphicImage value="/resources/images/logotipos/logo_ibrv.jpg"></p:graphicImage>
#5

Vlw @Mike, deu certinho aqui!
:grinning::grinning::grinning: