使用< h：graphicImage>加载来自webapps / webcontext / deploy文件夹外部的图像或者< img>标签 [英] Load images from outside of webapps / webcontext / deploy folder using <h:graphicImage> or <img> tag

问题描述

我需要使用JSF < h：graphicimage> 标记或HTML < img>显示位于Web应用程序中deploy文件夹之外的图像; 标签。我怎样才能做到这一点？

I need to display images which reside outside of deploy folder in web application using JSF <h:graphicimage> tag or HTML <img> tag. How can I achieve that?

推荐答案

到目前为止，它必须可以通过公共URL访问。因此，< img src> 必须最终引用 http：// URI，而不是 file：// URI左右。最终，HTML源在最终用户的机器上执行，并且在解析HTML源期间由webbrowser单独下载图像。当webbrowser遇到 file：// URI时，例如 C：\ path \ to \ image.png ，然后它将在终端用户自己的本地磁盘文件系统中查找图像而不是网络服务器的图像。如果webbrowser在与网络服务器不同的机器上运行，这显然不会起作用。

To the point, it has to be accessible by a public URL. Thus, the <img src> must ultimately refer a http:// URI, not something like a file:// URI or so. Ultimately, the HTML source is executed at enduser's machine and images are downloaded individually by the webbrowser during parsing the HTML source. When the webbrowser encounters a file:// URI such as C:\path\to\image.png, then it will look in enduser's own local disk file system for the image instead of the webserver's one. This is obviously not going to work if the webbrowser runs at a physically different machine than the webserver.

有几种方法可以达到这个目的：

There are several ways to achieve this:

1. 如果您完全控制images文件夹，则只需删除包含所有图像的文件夹，例如 / images 直接在servletcontainer的部署文件夹中，例如Tomcat和 / webapps 文件夹> / domains / domain1 / applications GlassFish的文件夹。无需进一步配置。

1. If you have full control over the images folder, then just drop the folder with all images, e.g. /images directly in servletcontainer's deploy folder, such as the /webapps folder in case of Tomcat and /domains/domain1/applications folder in case of GlassFish. No further configuration is necessary.

或者，向服务器添加一个新的webapp上下文，指向绝对值磁盘文件系统与这些图像的文件夹位置。怎么做取决于使用的容器。以下示例假设图像位于 / path / to / images 中，并且您希望通过 http：//.../ images 。

Or, add a new webapp context to the server which points to the absolute disk file system location of the folder with those images. How to do that depends on the container used. The below examples assume that images are located in /path/to/images and that you'd like to access them via http://.../images.

如果是Tomcat，请将以下新条目添加到Tomcat中 /conf/server.xml 在< Host> 内：

In case of Tomcat, add the following new entry to Tomcat's /conf/server.xml inside <Host>:

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

如果是GlassFish，请将以下条目添加到 / WEB-INF / glassfish-web.xml ：

In case of GlassFish, add the following entry to /WEB-INF/glassfish-web.xml:

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

如果是WildFly，请在中添加以下条目< host name = default-host> of /standalone/configuration/standalone.xml ...

In case of WildFly, add the following entry inside <host name="default-host"> of /standalone/configuration/standalone.xml ...

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

...并进一步向下< handlers> 输入完全相同的< subsystem> ，如上所述< location> ：

... and further down in <handlers> entry of the very same <subsystem> as above <location>:

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

---

或者，创建 Servlet 将图像从磁盘流式传输到响应：

---

Or, create a Servlet which streams the image from disk to response:

@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());
    }

}

如果您碰巧使用OmniFaces，然后 FileServlet 可能会有用还考虑了头部，缓存和范围请求。

If you happen to use OmniFaces, then the FileServlet may be useful as it also takes into account head, caching and range requests.

或者，使用 OmniFaces < o：graphicImage> ，支持返回<$的bean属性c $ c> byte [] 或 InputStream ：

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

---

或者，使用 PrimeFaces < p：graphicImage> 支持bean方法返回特定于PrimeFaces的 StreamedContent 。

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)));
    }
}

---

对于第一种方式，Tomcat和WildFly以第二种方式接近，图像将由 http://example.com/images/filename.ext 因此可以在纯HTML中引用，如下所示

For the first way and the Tomcat and WildFly approaches in second way, the images will be available by http://example.com/images/filename.ext and thus referencable in plain HTML as follows

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

对于第二种方式和第三种方式的GlassFish方法，图像将由 http://example.com/context/images/filename.ext 因此可以在纯HTML中引用遵循

For the GlassFish approach in second way and the third way, the images will be available by http://example.com/context/images/filename.ext and thus referencable in plain HTML as follows

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

或在JSF中如下（上下文路径自动添加）

or in JSF as follows (context path is automatically prepended)

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

对于第四种方式的OmniFaces方法，请参考如下

For the OmniFaces approach in fourth way, reference it as follows

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

对于第五种方式的PrimeFaces方法，请参考如下：

For the PrimeFaces approach in fifth way, reference it as follows:

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

参见：

• 推荐的保存方式上传的文件在servlet应用程序中


• 在Java Web应用程序中从应用程序服务器外部提供静态数据的最简单方法


• 静态资源servlet的抽象模板（支持HTTP缓存）


• 从数据库中将图像显示为字节[]，作为JSF页面中的图形图像


• 使用p：graphicImage和StreamedContent从数据库显示动态图像



See also:

• Recommended way to save uploaded files in a servlet application
• Simplest way to serve static data from outside the application server in a Java web application
• Abstract template for a static resource servlet (supporting HTTP caching)
• Show image as byte[] from database as graphic image in JSF page
• Display dynamic image from database with p:graphicImage and StreamedContent

这篇关于使用&lt; h：graphicImage&gt;加载来自webapps / webcontext / deploy文件夹外部的图像或者&lt; img&gt;标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！