带图像的JSF commandLink

Question

我对<p:commandLink>有意见。我想使悬停效果，但我不能通过CSS加载图像到<p:graphicImage>。

CSS：

.accountEditBtn {
    background-image:
    url('#{request.contextPath}/resources/image/pencil_black.png');
}

JSF：

<p:commandLink
    update="@form"
    actionListener="#{someBean.someListener}">
    <h:graphicImage styleClass="accountEditBtn" />
</p:commandLink>

我看到带边框的空矩形。

但是当我将alt添加到graphicImage中时，我会从alt中获得图像而不是文本...

我的错误在哪里？谢谢。附注：键入错误- classType -> styleClass

Answer 1

尝试使用styleClass而不是<h:graphicImage>

<p:commandLink 
   styleClass="accountEditBtn"
   update="@form"
   actionListener="#{someBean.someListener}"/>

试试这个类

.accountEditBtn { background-image: url('../resources/image/pencil_black.png'); }

B.T.W

难道不应该是图像吗？或者它是image (文件夹名)

也来看看这个。如果你想使用带有图片的commandButton：PrimeFaces icons

Answer 2

你为什么不用

<p:commandButton ... icon="yourbuttonstyleclass"/>

在css中

.yourbuttonstyleclass {  
background-image: url('../images/yourimage.png') !important;
}