Charger des images à partir de l'extérieur de webapps / webcontext / dossier de déploiement à l'aide de <h:graphicImage> ou <img> tag

Au point, il doit être accessible par une URL publique. Ainsi, la <img src> fin de compte, doivent consulter un http:// URI, pas quelque chose comme un file:// URI ou donc. En fin de compte, la source HTML est exécutée à l'utilisateur final de la machine et les images sont téléchargées individuellement par le navigateur lors de l'analyse de la source HTML. Lorsque le navigateur rencontre une file:// URI comme C:\path\to\image.png, puis il va chercher de l'utilisateur final dans les propres locaux de disque système de fichiers de l'image au lieu du serveur web de l'un. Ce n'est évidemment pas d'aller travailler si le webbrowser s'exécute à un physiquement autre machine que le serveur web.

Il y a plusieurs façons d'y parvenir:

1. Si vous avez le plein contrôle sur le dossier d'images, puis il suffit de déposer le dossier avec toutes les images, par exemple, /images directement dans servletcontainer du dossier de déploiement, tels que la /webapps dossier en cas de Tomcat et /domains/domain1/applications dossier en cas de GlassFish. Aucune configuration supplémentaire n'est nécessaire.

   ---

2. Ou ajouter une nouvelle webapp contexte pour le serveur, ce qui souligne l'absolue de disque système de fichiers de l'emplacement du dossier, avec ces images. La façon de le faire dépend du récipient utilisé. Les exemples ci-dessous supposent que les images se trouvent dans /path/to/images et que vous souhaitez y accéder via http://.../images.

   En cas de Tomcat, ajouter la nouvelle entrée suivante à Tomcat /conf/server.xml à l'intérieur de <Host>:

   <Context docBase="/path/to/images" path="/images" />

   En cas de GlassFish, ajoutez l'entrée suivante à /WEB-INF/glassfish-web.xml:

   <property name="alternatedocroot_1" value="from=/images/* dir=/path/to" />

   En cas de WildFly, ajoutez l'entrée suivante à l'intérieur de <host name="default-host"> de /standalone/configuration/standalone.xml ...

   <location name="/images" handler="images-content" />

   ... et plus bas dans <handlers> entrée de la même <subsystem> comme ci-dessus <location>:

   <file name="images-content" path="/path/to/images" />

   ---

3. Ou, créer un Servlet qui diffuse l'image à partir du disque de réponse:

   @WebServlet("/images/*")
   public class ImageServlet extends HttpServlet {
   
       protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           String filename = request.getPathInfo().substring(1);
           File file = new File("/path/to/images", filename);
           response.setHeader("Content-Type", getServletContext().getMimeType(filename));
           response.setHeader("Content-Length", String.valueOf(file.length()));
           response.setHeader("Content-Disposition", "inline; filename=\"" + filename + "\"");
           Files.copy(file.toPath(), response.getOutputStream());
       }
   }

   Si vous arrive d'utiliser OmniFaces, puis le FileServlet peut être utile, car elle tient compte également de la tête, la mise en cache et les demandes de plage.

   ---

4. Ou, utiliser OmniFaces <o:graphicImage> qui prend en charge un haricot propriété de retour byte[] ou InputStream:

   @Named
   @ApplicationScoped
   public class Bean {
   
       public InputStream getImage(String filename) {
           return new FileInputStream(new File("/path/to/images", filename));
       }
   }

   ---

5. Ou, utiliser PrimeFaces <p:graphicImage> qui prend en charge une méthode d'haricot retour PrimeFaces spécifiques StreamedContent.

   @Named
   @ApplicationScoped
   public class Bean {
   
       public StreamedContent getImage() throws IOException {
           FacesContext context = FacesContext.getCurrentInstance();
   
           if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
               //So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
               return new DefaultStreamedContent();
           }
           else {
               //So, browser is requesting the image. Return a real StreamedContent with the image bytes.
               String filename = context.getExternalContext().getRequestParameterMap().get("filename");
               return new DefaultStreamedContent(new FileInputStream(new File("/path/to/images", filename)));
           }
       }
   }

   ---

Pour le premier et le Tomcat et WildFly approches dans la deuxième méthode, les images seront disponibles par http://example.com/images/filename.ext et donc referencable en HTML comme suit

<img src="/images/filename.ext" />

Pour GlassFish approche dans la deuxième voie et de la troisième voie, les images seront disponibles par http://example.com/context/images/filename.ext et donc referencable en HTML comme suit

<img src="#{request.contextPath}/images/filename.ext" />

ou en JSF comme suit (chemin de contexte est automatiquement ajouté)

<h:graphicImage value="/images/filename.ext" />

Pour la OmniFaces approche de la quatrième voie, la référence comme suit

<o:graphicImage value="#{bean.getImage('filename.ext')}" />

Pour la PrimeFaces approche dans le cinquième moyen, de référence comme suit:

<p:graphicImage value="#{bean.image}">
    <f:param name="filename" value="filename.ext" />
</p:graphicImage>

Noter que l'exemple #{bean} est @ApplicationScoped qu'il représente essentiellement un apatride service. Vous pouvez aussi le faire @RequestScoped, mais alors la fève serait recréé à chaque requête, pour rien. Vous ne pouvez pas faire @ViewScoped, car pour le moment, le navigateur doit télécharger l'image, le serveur n'est pas de créer une page JSF. Vous pouvez le faire @SessionScoped, mais il est alors enregistré dans la mémoire, pour rien.

Voir aussi:

• Recommandé pour enregistrer les fichiers téléchargés dans un servlet application
• La plus simple façon de servir statique des données à partir de l'extérieur de l'application serveur dans une application web Java
• Abstrait modèle pour une ressource statique servlet (soutien à la mise en cache HTTP)
• Montrer l'image que byte[] à partir de la base de données que le graphique de l'image dans la page JSF
• Affichage dynamique de l'image à partir de la base de données avec p:graphicImage et StreamedContent
• Comment choisir le bon haricot portée?

Dans PrimeFaces vous pouvez mettre en œuvre votre fève de cette façon:

private StreamedContent image;

public void setImage(StreamedContent image) {
    this.image = image;
}

public StreamedContent getImage() throws Exception {
    return image;
}

public void prepImage() throws Exception {
File file = new File("/path/to/your/image.png");
InputStream input = new FileInputStream(file);
ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
setImage(new DefaultStreamedContent(input,externalContext.getMimeType(file.getName()), file.getName()));
}

Dans votre code HTML Facelet:

<body onload="#{yourBean.prepImage()}"></body> 
<p:graphicImage value="#{youyBean.image}" style="width:100%;height:100%" cache="false" >
</p:graphicImage>

Je suggère de définir l'attribut cache="false" dans le graphicImage composant.