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

Posted 2023-02-23

【中文标题】需要帮助以在命令按钮中显示图标图像

【英文标题】：Need help to display an icon image in a command button

【发布时间】：2011-08-23 00:17:23

【问题描述】：

只是基本需求，但无法使其发挥作用。 我想要一个 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，它确实显示了图片：

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

---

我使用的是 tomcat 7，这些是我的依赖项：

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

---

任何想法出了什么问题？

谢谢！

【问题讨论】：

你确定你的css能找到图片（正确的相对路径）吗？如果您请求包含该按钮的页面，请尝试使用 Chrome/Firefox 开发人员工具检查任何 404 错误。

@Matt Handy：您好，感谢您的回复。是的，如原始帖子中所述，我可以使用该 URL 查看图像。而且我也忘了提到我也使用萤火虫设法查看了图像。但是在对 css 进行了一些调整后，我找到了解决方案。有兴趣的请看下面的答案。谢谢！

【参考方案1】：

在使用 firebug 进行一些调查后，我发现罪魁祸首来自我定义的 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>

---

谢谢！

【参考方案2】：

在图标类名前写ui-widget

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

.ui-state-default 不会使其在其他组件中可见，例如 <p:menuitem/> 和 <p:menuButton/>

【讨论】：

我不再玩这个项目，也无法测试它。但我认为这是最安全的答案。谢谢分享。

很好的解决方案！但是 Primefaces 的类变化很大，这就是为什么它可能对某些人不起作用并且可能会在版本更新时中断......它可能对谁有帮助：检查您生成的 html 和/或查看您所在版本的相应 primefaces 样式文档使用，然后你就可以让它与 css 一起工作！

【参考方案3】：

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。 请注意，在这种情况下，上述代码将不起作用。}

【讨论】：

@Zbyszek 这个答案怎么样？

【参考方案4】：

使用commandButton 时，png 文件大小为 16 x 16 很重要，因为较大的图像可能无法正确显示或根本无法显示。