Load image after selected item

Question

In my application the user defines a root directory. After defining the root there is the listing of files present in the directory. When the file is selected there is another directory where there is an image with the same name as the file. I want when selecting the file it displays the image referring to the file. I searched the component p:graphicImage but I did not find a good example. I saw using the library="images" but it only recognizes the images that are in the Resources/images folder. I thought if I could change the default location of this library by pointing to my image folder I could solve the problem. I wonder if this is the best solution? Or if you help me to solve this problem in another way.

At the moment the page looks like this:

<h:form>
    <p:panel header="Informações dos Itens">
        <h:panelGrid columns="2">
            <p:outputLabel value="Diretório Raiz Origem: " for="diretorioRaizOrigem" />
            <p:inputText id="diretorioRaizOrigem" value="#{questItemController.questItem.diretorioRaizOrigem}">
                <p:ajax event="change" process="@this" immediate="true" />
            </p:inputText>
            <p:outputLabel for="itemOrigem" value="Item Origem" />
            <p:autoComplete id="itemOrigem" value="#{questItemController.questItem.nomeItemOrigem}"
                completeMethod="#{questItemController.listarItensDiretorioOrigem}" dropdown="true" var="bean" itemLabel="#{bean}"
                itemValue="#{bean}" effect="bounce" forceSelection="true" minQueryLength="3">
                <p:ajax event="itemSelect" listener="#{questItemController.itemChange()}" update="itemDestino,imagem" process="@this" />
            </p:autoComplete>
            <p:outputLabel value="Diretório Raiz de Destino" for="diretorioRaizDestino" />
            <p:inputText id="diretorioRaizDestino" value="#{questItemController.questItem.diretorioRaizDestino}" />
            <p:outputLabel value="Item Destino" for="itemDestino" />
            <p:inputText id="itemDestino" value="#{questItemController.questItem.nomeItemDestino}" />
            <p:graphicImage id="imagem" value="" rendered="#{questItemController.mostrarImagem}"/>
        </h:panelGrid>
    </p:panel>
</h:form>

Answer 1

You can create a Servlet that reads the image file in a directory according to a parameter in the url and then pass as parameter in the graphicImage url;

urlImagem = "/imagem?nome=nome-da-imagem";

<p:graphicImage id="imagem" url="#{questItemController.urlImagem}" rendered="#{questItemController.mostrarImagem}"/>

Servlet:

@WebServlet("/imagem")
public class LogoMarcaServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        Path path = Paths.get("diretorio/das/imagens/" + request.getParameter("nome"));
        byte[] data = Files.readAllBytes(path);

        ByteArrayOutputStream out = new ByteArrayOutputStream();
        out.write(data);
        response.setContentType("image/png"); 
        response.setHeader("Content-Disposition", "inline");
        response.setBufferSize(out.size());    

        out.writeTo(response.getOutputStream());
        response.getOutputStream().flush();
        response.getOutputStream().close();
    }

}