JSF commandLink 与图像答案

【问题标题】：JSF commandLink with imageJSF commandLink 与图像
【发布时间】：2012-04-19 08:33:53
【问题描述】：

<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中获取图像而不是文本...

我的错误在哪里？谢谢你。 p.s.输入错误 - classType -> styleClass

【问题讨论】：

只是一个注释，但你可以写background: url("#{resource['image/pencil_black.png']}");而不是CSS中的background-image: url('#{request.contextPath}/resources/image/pencil_black.png');

【解决方案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

不应该是图像吗？或者是图片（文件夹名）

也看看这个。如果你想要带有图像的命令按钮：PrimeFaces icons

【讨论】：

【解决方案2】：

你为什么不使用

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

在css中

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

【讨论】：