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

【问题标题】：How to render images in JSF + Primefaces 3.2如何在 JSF + Primefaces 3.2 中渲染图像
【发布时间】：2015-09-25 21:37:35
【问题描述】：

我一直在尝试在 Primefaces 应用程序中渲染图像。这在手风琴面板外工作正常：

<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" />

----------------->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,

----------------->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" />

----------------->HTML:

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

编辑：这行得通，但为什么？

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

没有 S 的资源！！

谢谢！萨米人

【问题讨论】：

从您提供的代码中它应该可以工作（如果图像路径正确）。它与 Primefaces 展示柜相同。您能否发布更多代码（至少是页面标题和完整的手风琴面板）。
我添加了更多代码和标头以及源 html 代码。它和showcase完全一样，我的图片在resources/images/中。

标签： image jsf primefaces rendering

【解决方案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 应用程序，其中图像/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" />

或者引入一个功能齐全的特定于 web 应用程序的库，您可以在其中放置所有资源：

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

【讨论】：

谢谢！你能告诉我为什么这是有效的吗？没有 S 的资源？令人困惑。你经常回答，你知道很多，所以你能告诉我如何国际化facelets吗？我正在使用全局捆绑包和 Netbeans。
最后一个没有用，或者我弄错了，但其他所有的都做了。我的意思是：
#{resource} 将给定的资源名称转换为 URL。至于最后一个示例，将images 文件夹放在另一个名为default 的文件夹中。所以：/resources/default/images/testi.JPG。如果你有更新的版本，你可以创建例如/resources/default/1_1/images/testi.JPG 和 JSF 资源处理程序会自动为它服务。