Question

我按照这里的每个例子

但似乎没有任何效果。

我尝试将图像添加到命令按钮，但是..

.imagesbuton{
    background-image:url("/image/add.jpg") !important ;
    width: 30;  
    height: 40;}


<p:commandButton  image="imagesbuton" rendered="#{LigneXL.resultat eq 'N existe pas'}"   action="#{composantbean.initialise()}" />

Answer 1

好的，因此声明<style>元素的页面的完整URL是：

http://localhost:8080/JEE/pages/Menu.jsf

您希望在<style>中使用的图像文件的完整网址未明确指定，但这最基于目前提供的信息：

http://localhost:8080/JEE/image/add.jpg

您的具体问题很可能是由于您以某种方式预期服务器根据服务器的项目结构内联HTML文档中的图像。然而，这是完全错误的。相反，webbrowser相对于引用图像资源的主要资源的URL（可以是CSS文件或在您的情况下，因此是JSF页面本身）单独下载图像，并将其包含在呈现的HTML表示中。

因此，当您使用前导斜杠指定url("/image/add.jpg")时，会使其成为域相对URL，然后浏览器将尝试从以下位置下载图像：

http://localhost:8080/image/add.jpg

然而，这是错误的。如果您已经注意到浏览器开发人员工具集中的HTTP流量，那么您应该注意到浏览器在图像请求中检索到了HTTP 404错误。如果需要指定域相对URL，则需要包含上下文路径。你可以静态地做到这一点：

.imagesbuton {
    background-image: url("/JEE/image/add.jpg");
}

或动态：

.imagesbuton {
    background-image: url("#{request.contextPath}/image/add.jpg");
}

或者，您可以使用相对网址，从而将一个文件夹从/JEE/pages升级到/JEE，然后转到/image文件夹：

.imagesbuton {
    background-image: url("../image/add.jpg");
}

按钮不显示图像

1 个答案: