仅显示带有图像的命令按钮

Posted 2023-02-23

【中文标题】仅显示带有图像的命令按钮

【英文标题】：Displaying command button with image only

【发布时间】：2011-12-21 15:39:12

【问题描述】：

我试图仅在我的页面上显示一个带有图像的按钮，但我看到的只是带有 ^ 的按钮。以下是我的按钮的代码：

<p:commandButton onclick="lineSearch.show();" image="backgroung-image:url(/images/title_logo.jpg)"/> 
<p:dialog header="Modal Dialog" widgetVar="lineSearch" modal="true" onCloseUpdate="lineIdField" showEffect="scale" hideEffect="explode">  
    <ui:include src="lineSearch.xhtml"/>
</p:dialog>

图像确实存在于图像文件夹中。该按钮在页面中呈现如下：

<button id="j_idt23:j_idt27" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" type="submit" onclick="lineSearch.show();;PrimeFaces.ab(formId:'j_idt23',source:'j_idt23:j_idt27',process:'@all');return false;" name="j_idt23:j_idt27" role="button" aria-disabled="false">
    <span class="ui-button-icon-primary ui-icon backgroung-image:url(/images/title_logo.jpg)"></span>
    <span class="ui-button-text">ui-button</span>
</button>
<script type="text/javascript">
    widget_j_idt23_j_idt27 = new PrimeFaces.widget.CommandButton('j_idt23:j_idt27', text:false,icons:primary:'backgroung-image:url(/images/title_logo.jpg)');
</script>

谢谢！！！

【问题讨论】：

真的渲染了backgroung-image吗？

@BalusC 这是它呈现的内容：awesomescreenshot.com/0d9nm5ueb

您为什么编辑问题以在image 属性中复制这个不正确的样式属性？

您真正拥有哪些代码（在 XHTML 文件中）以及它真正呈现了什么？ （在 HTML 源代码中）？请不要编辑复制粘贴，您可能会在没有意识到的情况下删除错误，甚至引入新的错误（就像您上次编辑时一样）。

@BalusC 很抱歉编辑代码。这实际上就是现在的内容和渲染的内容。

【参考方案1】：

image 属性必须引用 CSS 类名，而不是普通的 CSS 属性。所以，应该这样做：

<p:commandButton image="someCssClassName" /> 

在您的 CSS 中添加以下内容：

.someCssClassName 
    background-image: url(images/title_logo.jpg)

请注意，我修正了属性名称中的主要错字，并从图像 URL 中删除了前导斜杠，否则它将相对于站点的域根进行解析；以上期望title_logo.jpg 位于/image 文件夹中，而/image 文件夹又位于CSS 文件所在的文件夹中。

但是，我认为这个不太笨拙：

<p:commandLink action="#bean.submit">
    <h:graphicImage name="images/title_logo.jpg" />
</p:commandLink>

【讨论】：

@Olivier：请阅读***.com/questions/11988415/… 了解有关如何使用 JSF 资源的相关问题（这是 name 属性所指向的）。

嗯，好的。在我的情况下，name 属性不起作用，因为我没有创建与之关联的库。抱歉这个糟糕的编辑 BalusC

@Olivier：显然你没有把它放在/resources 文件夹中。我的回答中的特定示例期望图像文件位于/resources/images/title_logo.jpg。

请注意，image 属性现已弃用，请改用icon 属性。

从richfaces迁移..唯一可以使用commanLink的，无需添加更多css。

【参考方案2】：

我建议同时使用“P:coomandLink”和“P:graphicImage”。 我在 webapps 下创建了一个文件夹，并将我的 jpg 文件放在这个文件夹下。 这段代码对我来说很好。 祝你好运。

<p:commandLink action="#MyClass.myMethod">
   <p:graphicImage value="images/Max-Burger.jpg"  />
</p:commandLink>

【参考方案3】：

把它放在你的 css 样式上：

    .dolar-icon 
    background-image: url("#facesContext.externalContext.request.contextPath/resources/imagenes/dolar.png") !important;

现在您可以使用您在 css 中定义的图标“dolar-icon”了。

<p:commandButton action="#as.fe" icon="dolar-icon"/>

【参考方案4】：

更简单：

<p:commandButton icon="ui-icon-XXXXX">

您可以选择不同的图标：https://api.jqueryui.com/theming/icons/ 和 http://www.primefaces.org/showcase/ui/misc/fa.xhtml

【讨论】：

如果你想要一个现有的图标，那只会更容易。如果您想要自己的图像（就像 OP 一样），这根本行不通。

只是一个简单的方法