需要帮助才能在命令按钮中显示图标图像

只是一个基本的需求，但无法让它工作。我想有一个primefaces按钮来显示我的图像，没有任何文字。需要帮助才能在命令按钮中显示图标图像

但我得到的是一个按钮，只包含一个^字符，并不显示图像，它只有16x16的大小。

所以，这是primefaces按钮：

<p:commandButton image="ui-icon-csv" title="CSV Document" ajax="false"> 
    <p:dataExporter type="csv" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton>

这是css文件：

.ui-icon-csv { 
    background-image: url(images/csv_small.png); 
}

这是该按钮的生成html ：

<button type="submit" onclick=";" 
    name="gridRPBDetails:j_idt82" id="gridRPBDetails:j_idt82" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" 
    role="button" aria-disabled="false"> 
     <span class="ui-button-icon-primary ui-icon ui-icon-csv"></span><span class="ui-button-text">CSV Document</span> 
</button>

为了证明图像访问，我试试这个URL，而事实上它显示的图片：使用Tomcat 7

http://albert:8080/mywebapp/faces/javax.faces.resource/images/csv_small.png

IM，而这些是我的依赖关系：

<dependency> 
    <groupId>org.primefaces</groupId> 
    <artifactId>primefaces</artifactId> 
    <version>2.2.1</version> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-api</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency> 
<dependency> 
    <groupId>com.sun.faces</groupId> 
    <artifactId>jsf-impl</artifactId> 
    <version>2.0.4-b09</version> 
    <scope>compile</scope> 
</dependency>

任何想法什么地方出了错？

谢谢！

来源

2011-05-11 bertie

你确定你的css找到了图像（正确的相对路径）吗？如果您请求包含该按钮的页面，请尝试使用Chrome/Firefox开发人员工具检查是否存在任何404错误。 – 2011-05-11 06:29:33

@Matt Handy：您好，非常感谢您的回复。是的，正如原文中所述，我可以使用该URL查看图像。而且我忘了提及，我设法查看图像也使用萤火虫。但是我已经找到了一些解决方案，然后在css周围进行了一些调整。如果您有兴趣，请参阅下面的答案。谢谢！ – bertie 2011-05-12 10:25:39

经过一些调查使用萤火虫后，我发现罪魁祸首是从我定义的CSS东西。

所以这些都是我为使这项工作做出的改变。

的JSF按钮：

<p:commandButton image="ui-icon-xls" title="Excel Document" ajax="false"> 
    <p:dataExporter type="xls" target="gridRPBDetails" 
     fileName="#{tInputBean.exportFilename}" /> 
</p:commandButton>

的CSS：

.ui-state-default .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
}

这里是生成的html：

<button type="submit" title="Excel Document" onclick=";" 
    name="gridRPBDetails:j_idt81" id="gridRPBDetails:j_idt81" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" 
    role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-xls"></span> 
    <span class="ui-button-text">ui-button</span> 
</button>

谢谢！

来源

2011-05-12 10:31:10 bertie

Primefaces提供graphicImage如图他们showcase-labs (broken link)：

<p:commandLink ajax="false"> 
    <p:graphicImage value="/images/excel.png" /> 
    <p:dataExporter type="xls" target="tbl" fileName="cars" /> 
</p:commandLink>

它可以以某种方式是有用的人。

_{* For PrimeFaces 5.2, follow to this showcase-labs link。请注意，在这种情况下，上述代码将不起作用。}

来源

2012-02-24 16:33:34 falsarella

@Zbyszek这个问题呢？ – Andy 2013-07-12 18:01:50

写ui-widget图标类名

.ui-widget .ui-icon-xls { 
    background-image: url(images/excel_small.png); 
}

的.ui-state-default不会使它像<p:menuitem/>和<p:menuButton/>

来源

2012-03-12 12:24:12

我不再玩这个项目了，不能测试它。但我认为这是最安全的答案。感谢你的分享。 – bertie 2012-03-12 14:49:19

不工作:(对我来说 – Zbyszek 2013-07-12 15:53:29

伟大的解决方案！但是Primefaces的类改变了很多，这就是为什么它可能不适用于某些并可能会破坏版本更新......可能帮助的人：检查您生成的html和/或者查看你正在使用的版本的相应的primefaces风格文档，那么你可以使它与CSS工作！ – falsarella 2015-04-22 18:50:38

当commandButton使用其他组件可见之前，该PNG文件的大小是很重要16 x 16，因为更大的图像可能无法正确显示，或根本不显示。

来源

2013-05-05 05:07:19 user2351270

需要帮助才能在命令按钮中显示图标图像

回答

相关问题