将本地资源链接 (file:///) 转换为 portlet 中的可访问链接 (http://)

Question

如何将目录转换为链接？当我尝试在 liferay 上使用 Galleria 插件显示图像时，它什么也没显示。 Google Chrome 上的“检查元素”模式显示：

我在 Chrome 上收到这条消息：

不允许加载本地资源： file:///E:/​​Liferay/liferay-portal-6.1.1-ce-ga2/tomcat-7.0.27/webapps/Xplor-…et/WEB-INF/files/images/130621_JimmJuli_IO9032193908/IO9032193908_0001.jpg

代码如下：

<div style="background-color: white; padding: 5px; border: 1px black solid;">
    <p:commandButton type="button" value="Show Images" onclick="dialogImg.show()" />
</div>
<p:dialog header="Images" widgetVar="dialogImg" modal="true" draggable="false" resizable="false" width="540" height="370">
    <p:galleria value="#{viewBacking.images}" var="image" panelWidth="510" panelHeight="310" showCaption="true">  
        <p:graphicImage value="#{image}" title="description"/>  
    </p:galleria>
</p:dialog>

支持 bean：

public class ViewBacking {
    private List<String> images;
    public List<String> getImages() {
        return images;
    }

    public ViewBacking() {
        try {
            getImageList();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public void getImageList() {
        images = new ArrayList<String>();
        File[] imageList = getFileList("//images//imgfolder//"); 
        //--> It will returns: E:\Liferay\liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\Xplor-portlet\WEB-INF\files\images\imgfolder\IMAGE_NAME.EXT

        for (int i = 0; i < imageList.length; i++) {
            if (imageList[i].isFile())
                images.add("/files/images/" + imageList[i].getName()); //UPDATE
        }
    }

    //This is how I get a directory path
    public File[] getFileList(String path) {
        File folder = new File(getPath(path));
        File[] listOfFiles = folder.listFiles();
        return listOfFiles;
    }
    public String getPath(String fileName) {
        ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext();
        return extContext.getRealPath("//WEB-INF//files//" + fileName);
    }
}

正如您在上面的代码中看到的那样，图像源将填充类似：E:\Liferay\liferay-portal-6.1.1-ce-ga2\tomcat-7.0.27\webapps\Xplor-portlet\WEB-INF\files\images\imgfolder\IMAGE_NAME.EXT，如何使它像http://localhost:8080/IMAGE_LINK？谢谢。

---

更新

我已经尝试将目录改成：

WebContent
 |-- META-INF
 |-- WEB-INF
 |    |-- files
 |    |    `-- ...
 |    `-- web.xml
 |-- files
 |    |-- images
 |    |    `-- foo.png
 |    |    `-- bar.png
 |    |    `-- baz.png
 :

而且画廊仍然没有显示图像。当我尝试访问它时：http://localhost:8080/files/images/foo.png，浏览器返回The requested resource was not found.。正如您在上面的代码中看到的那样，images[] 将填充如下内容：

/files/images/foo.png
/files/images/bar.png
/files/images/baz.png

但是当我在 Chrome 上检查 view source 模式时，它返回：

/Xplor-portlet/files/images/foo.png
/Xplor-portlet/files/images/bar.png
/Xplor-portlet/files/images/baz.png

Answer 1

只需将它们放在/WEB-INF 之外即可公开访问。

例如

WebContent
 |-- META-INF
 |-- WEB-INF
 |    |-- files
 |    |    `-- ...
 |    `-- web.xml
 |-- images
 |    |-- foo.png
 |    |-- bar.png
 |    `-- baz.png
 :

这样你就可以像访问它们了

<p:graphicImage value="/images/foo.png" />
<p:graphicImage value="/images/bar.png" />
<p:graphicImage value="/images/baz.png" />

只需生成这些路径 "/images/foo.png"、"/images/bar.png"、"/images/baz.png" 等，而不是本地磁盘文件系统路径。这确实没有任何意义，因为访问您网站的最终用户不一定将这些文件放在他们自己的磁盘文件系统的完全相同位置。

---

与具体问题无关，为此目的使用ExternalContext#getRealPath() 是一种糟糕的做法。它可能会在某些服务器配置上返回null，因此WAR 文件不会在磁盘上展开，而是在内存中展开。而是使用ExternalContext#getResourcePaths()。