Indeed, the renderer of <p:selectOneButton>
doesn't take into account any HTML in labels. Your best bet is to set it as CSS background image instead.
Given a
<p:selectOneButton ... styleClass="buttons">
you can style the individual buttons using CSS3 :nth-child()
pseudoselector
.buttons .ui-button:nth-child(1) {
background: url("#{resource['img/myImg1.png']}") no-repeat;
}
.buttons .ui-button:nth-child(2) {
background: url("#{resource['img/myImg2.png']}") no-repeat;
}
If you're however targeting browsers which don't support it (certain IE versions), then you can't go around performing the job via JS/jQuery.
$(".buttons .ui-button:eq(0)").css("background", "url('resources/img/myImg1.png') no-repeat");
$(".buttons .ui-button:eq(1)").css("background", "url('resources/img/myImg2.png') no-repeat");
Unrelated to the concrete problem, the way how you're using resource library
is not entirely right. Carefully read What is the JSF resource library for and how should it be used? to learn more about it.