Question

我一直在尝试在Primefaces-application中渲染图像。这在手风琴小组之外工作正常：

<h:graphicImage library="images" name="testi.JPG" />

但是当我尝试在手风琴面板中使用它时，它不再起作用了：

<p:accordionPanel>
    <p:tab title="Godfather Part I">
        <h:panelGrid columns="2" cellpadding="10">
            <h:graphicImage  library="images" value="testi.JPG" />

Primefaces中有一个图像标签，但根本没有库标签，所以我也试过了：

<p:tab title="Godfather Part II">
        <h:panelGrid columns="2" cellpadding="10">
                    <p:graphicImage url="/resources/images/testi.jpg" />

那么有人可以告诉我该怎么做以及这样做的正确方法是什么，因为有很多不同的选择，但在我的情况下什么都没有？如何将通用图像文件夹添加到我的应用程序中，哪里没有路径？

<?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">
<head><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/theme.css?ln=primefaces-flick" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.2" /><link type="text/css" rel="stylesheet" href="/temp/faces/javax.faces.resource/layout/layout.css?ln=primefaces&amp;v=3.2" /><script type="text/javascript" src="/temp/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/temp/faces/javax.faces.resource/layout/layout.js?ln=primefaces&amp;v=3.2"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Primefaces Template</title></head><body>

查看来源给出：这是在手风琴小组之外，它正在运作：

<h:graphicImage library="images" name="testi.JPG" />

-------------------＆GT; HTML：

<img src="/temp/faces/javax.faces.resource/testi.JPG?ln=images" />

在Accordion面板中，使用在面板外工作的相同代码行：

<p:tab title="Godfather Part I">
        <h:panelGrid columns="2" cellpadding="10">
            <h:graphicImage  library="images" value="testi.JPG" />
            <h:outputText value="The story begins as Don Vito Corleone,

------------------＆GT; HTML：

<td><img src="testi.JPG" /></td>
<td>The story begins as Don Vito Corleone,

使用Primefaces标签：

<p:tab title="Godfather Part II">
        <h:panelGrid columns="2" cellpadding="10">
                    <p:graphicImage url="/resources/images/testi.jpg" />

-----------------＆GT; HTML：

<td><img id="j_idt29:j_idt32" src="/temp/resources/images/testi.jpg" alt="" /></td>

编辑：这是有效的，但为什么？

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

资源没有S !!

谢谢！萨米

Answer 1

您的错误是您使用value属性而不是name属性：

<h:graphicImage library="images" value="testi.JPG" />

引用资源时，您必须使用name属性。

<h:graphicImage library="images" name="testi.JPG" />

value属性即指向URL，而不是资源名称。

对具体问题

无关，您并不完全了解如何正确使用library属性。它不是要将图像，CSS和JS文件彼此分开。您已经拥有<h:graphicImage>，<h:outputStylesheet>和<h:outputScript>标记的唯一标记名。 library属性应该用于模块化Web应用程序，其中image / CSS / JS文件存储在外部JAR文件中。 library属性允许您对其进行版本控制并通过主Web应用覆盖它们。另请参阅What is the JSF resource library for and how should it be used?

修复您的<h:graphicImage> 删除错误的library属性用法：

<h:graphicImage name="images/testi.JPG" />

或者介绍一个完整的特定于webapp的库，其中包含所有资源：

<h:graphicImage library="default" name="images/testi.JPG" />

如何在JSF + Primefaces 3.2中渲染图像

1 个答案: