CODEWITHSUNDEEP
jsfjboss7.xwildfly
user697911
user697911

Reputation: 10531

Display external images outside of Wildfly in JSF

I want to display external image files under /var/images. To do that, I added another image handler "img" subsystem for the images folder in my configuration/standalone.xml as follows. Now I can browse the folder through http://localhost:8080/img/test.jpg. 

<server name="default-server">
                <http-listener name="default" socket-binding="http"/>
                <host name="default-host" alias="localhost">
                    <location name="/" handler="welcome-content"/>
                    **<location name="/img" handler="images"/>**
                        <filter-ref name="server-header"/>
                    <filter-ref name="x-powered-by-header"/>
                </host>
            </server>
            <servlet-container name="default">
                <jsp-config/>
                <websockets/>
            </servlet-container>
            <handlers>
                <file name="welcome-content" path="${jboss.home.dir}/welcome-content"/>
                **<file name="images" path="/var/images" directory-listing="true"/>**
            </handlers>

However, I can't display it correctly in my JSF code below. The image isn't displayed in the html page in browser. Any idea of what's missing or wrong? Thank you.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jstl/core"
    xmlns:p="http://primefaces.org/ui" 
    >

<ui:composition template="template.xhtml">
    <ui:define name="content">
        <h:messages />

        <h:form id="myform">
            <h:panelGrid columns="5">

                <h:graphicImage value="/img/test.jpg" />
                ...
            </h:panelGrid>
        </h:form>
        <br />


    </ui:define>
</ui:composition>
</html>

Upvotes: 2

Views: 1503

Answers (1)

BalusC
BalusC

Reputation: 1108632

The <h:graphicImage> is insuitable for the purpose of serving an image from an external URL. It interprets the value as a context-relative URL and auto-prepends the webapp's context path to the given value.

In other words, when the webapp is deployed to context path of /somecontext, then the

<h:graphicImage value="/img/test.jpg" />

generates

<img src="/somecontext/img/test.jpg" />

You should have noticed that by inspecting the generated HTML output and the 404 errors on img src in browser's console (press F12 in Chrome/Firefox23+/IE9+).

Just use plain HTML <img> instead of <h:graphicImage>. It serves no additional benefits in your specific case. Using a JSF component would only add unnecessary overhead.

<img src="/img/test.jpg" />

See also:

Upvotes: 3

Related Questions