Question

我想在PrimeFaces Web App中的内容流组件中显示图像的源路径有问题

我编码的内容：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>SELT</title>
    </h:head>
    <h:body>

        <br />


        <p:layout style="min-width:400px;min-height:300px;" fullPage="true">
            <p:layoutUnit position="north" header="Ipesoft SELT" >
                <p:contentFlow value="#{galeryContainer.images}" var="image" >
                    <p:graphicImage name="#{image}" styleClass="content" />
                    <div class="caption">#{image}</div>
                </p:contentFlow>
            </p:layoutUnit>

            <p:layoutUnit position="center" >
                <h:form>
                    <h:panelGrid columns="2" cellpadding="5">
                        <h:outputText value="User: " />
                        <p:inputText id="userName" value="#{LoginContainer.userName}" />
                        <h:outputText value="Password: " />
                        <p:password id="feedback" value="#{LoginContainer.password}" feedback="false" />
                    </h:panelGrid>
                </h:form>
                <h:form>
                    <p:growl id="growl" life="2000" />
                    <p:commandButton value="Log in" update="growl" id="LoginButton" actionListener="#{loginContainer.LoginButtonAction(actionEvent)}" />
                </h:form>
            </p:layoutUnit>
        </p:layout>


    </h:body>
</html>

ContentFlow背后的java类

package sk.ipesoft.selt.gui;

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class GaleryContainer {

    private List<String> images;

    @PostConstruct
    public void init() {
        String resourcePath;
        resourcePath = "/src/java/sk/ipesoft/selt/resources";
        //resourcePath = this.getClass().getResource("\\src\\java\\sk\\ipesoft\\selt\\resources").toString();

        System.out.println("resource path is:" +resourcePath);
        images = new ArrayList<String>();
        for (int i = 1; i <= 5; i++) {
            images.add(resourcePath+"/obr"+i+".jpg");
        }
    }

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

浏览器输出我得到的内容

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/PrimeFacesDemo/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/PrimeFacesDemo/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=5.0" /><link type="text/css" rel="stylesheet" href="/PrimeFacesDemo/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;v=5.0" /><script type="text/javascript" src="/PrimeFacesDemo/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=5.0"></script><script type="text/javascript" src="/PrimeFacesDemo/faces/javax.faces.resource/jquery/jquery-plugins.js?ln=primefaces&amp;v=5.0"></script><script type="text/javascript" src="/PrimeFacesDemo/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=5.0"></script><script type="text/javascript" src="/PrimeFacesDemo/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;v=5.0"></script><link type="text/css" rel="stylesheet" href="/PrimeFacesDemo/faces/javax.faces.resource/contentflow/contentflow.css?ln=primefaces&amp;v=5.0" /><script type="text/javascript" src="/PrimeFacesDemo/faces/javax.faces.resource/contentflow/contentflow.js?ln=primefaces&amp;v=5.0"></script>
        <title>SELT</title></head><body>

        <br /><script id="j_idt6_s" type="text/javascript">$(function(){PrimeFaces.cw("Layout","widget_j_idt6",{id:"j_idt6",widgetVar:"widget_j_idt6",full:true,north:{paneSelector:'#j_idt7',size:"auto",resizable:false,closable:false},center:{paneSelector:'#j_idt11',size:"auto",resizable:false,closable:false}},"layout");});</script><div id="j_idt7" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-north"><div class="ui-layout-unit-header ui-widget-header ui-corner-all"><span class="ui-layout-unit-header-title">Ipesoft SELT</span></div><div class="ui-layout-unit-content ui-widget-content"><div id="j_idt8" class="ui-contentflow ui-widget ui-widget-content ui-corner-all"><div class="loadindicator"><div class="indicator"></div></div><div class="flow"><div class="item"><img id="j_idt9" src="RES_NOT_FOUND" alt="" class="content" />
                    <div class="caption">/src/java/sk/ipesoft/selt/resources/obr1.jpg</div></div><div class="item"><img id="j_idt9" src="RES_NOT_FOUND" alt="" class="content" />
                    <div class="caption">/src/java/sk/ipesoft/selt/resources/obr2.jpg</div></div><div class="item"><img id="j_idt9" src="RES_NOT_FOUND" alt="" class="content" />
                    <div class="caption">/src/java/sk/ipesoft/selt/resources/obr3.jpg</div></div><div class="item"><img id="j_idt9" src="RES_NOT_FOUND" alt="" class="content" />
                    <div class="caption">/src/java/sk/ipesoft/selt/resources/obr4.jpg</div></div><div class="item"><img id="j_idt9" src="RES_NOT_FOUND" alt="" class="content" />
                    <div class="caption">/src/java/sk/ipesoft/selt/resources/obr5.jpg</div></div></div><div class="globalCaption"></div></div><script id="j_idt8_s" type="text/javascript">$(window).load(function(){PrimeFaces.cw("ContentFlow","widget_j_idt8",{id:"j_idt8",widgetVar:"widget_j_idt8"},"contentflow");});</script></div></div><div id="j_idt11" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-center"><div class="ui-layout-unit-content ui-widget-content">
<form id="j_idt12" name="j_idt12" method="post" action="/PrimeFacesDemo/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt12" value="j_idt12" />
<table cellpadding="5">
<tbody>
<tr>
<td>User: </td>
<td><input id="j_idt12:userName" name="j_idt12:userName" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /><script id="j_idt12:userName_s" type="text/javascript">PrimeFaces.cw("InputText","widget_j_idt12_userName",{id:"j_idt12:userName",widgetVar:"widget_j_idt12_userName"});</script></td>
</tr>
<tr>
<td>Password: </td>
<td><input id="j_idt12:feedback" name="j_idt12:feedback" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all" /><script id="j_idt12:feedback_s" type="text/javascript">$(function(){PrimeFaces.cw("Password","widget_j_idt12_feedback",{id:"j_idt12:feedback",widgetVar:"widget_j_idt12_feedback"});});</script></td>
</tr>
</tbody>
</table>
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-749451161652199493:-9195248737669583383" autocomplete="off" />
</form>
<form id="j_idt16" name="j_idt16" method="post" action="/PrimeFacesDemo/faces/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt16" value="j_idt16" />
<span id="j_idt16:growl"></span><script id="j_idt16:growl_s" type="text/javascript">$(function(){PrimeFaces.cw('Growl','widget_j_idt16_growl',{id:'j_idt16:growl',sticky:false,life:2000,escape:true,msgs:[]});});</script><button id="j_idt16:LoginButton" name="j_idt16:LoginButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({s:'j_idt16:LoginButton',u:'j_idt16:growl'});return false;" type="submit"><span class="ui-button-text ui-c">Log in</span></button><script id="j_idt16:LoginButton_s" type="text/javascript">PrimeFaces.cw("CommandButton","widget_j_idt16_LoginButton",{id:"j_idt16:LoginButton",widgetVar:"widget_j_idt16_LoginButton"});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-749451161652199493:-9195248737669583383" autocomplete="off" />
</form></div></div></body>
</html>

我的项目结构如下所示

enter image description here

问题是我想在我的源图像的类路径定义中，但我无法看到它。当我点击F6时，我的网络应用程序正常显示，但应该包含内容流组件的布局单元是空白的（没有图像显示）

希望你能帮忙

Answer 1

尝试替换＆＃39; name＆＃39;有价值的＆＃39;在<p:graphicImage>内的<p:contentFlow>标记中。

Answer 2

您是否尝试将图像置于素数资源的源路径中？这就像在这张图片http://www.mkyong.com/wp-content/uploads/2012/08/1-project-structure.png

中一样

如果有3个文件夹，您会看到一个名为resources的文件夹 1- js 2-图像 3- CSS

并尝试访问网址图片。

如果你做得对，你可以通过以下方式访问你的图片，css和js：

 <h:graphicImage value="#{resource['images:testi.JPG']}"/>

您还可以尝试打印网址，然后尝试在浏览器中复制并粘贴方向

Answer 3

替换：

<p:graphicImage name="#{image}" styleClass="content" />

使用：

<img src="http://www.jacksasylum.eu/ContentFlow/pics/pic#{image}" class="content"/>

埃德加。

那是所有人。

内容流不显示图像（src =＆＃34; RES_NOT_FOUND＆＃34;）

3 个答案: