Кнопка не отображает изображение

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

Хорошо, полный URL страницы, где объявлена ​​<style> элемент, таким образом:

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

И полный URL-адрес файла изображения, который вы хотите использовать в <style>, явно не указан вами, но на основе информации, предоставленной до сих пор, скорее всего:

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

Ваша конкретная проблема, скорее всего, вызвана тем, что вы как-то ожидали, что это сервер, который строит изображения в документе HTML на основе структуры проекта сервера. Это, однако, совершенно неверно. Вместо этого веб-браузер загружает изображение отдельно относительно 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"); 
} 

В качестве альтернативы, вы можете использовать относительный URL, в котором вы идете один папку вверх от /JEE/pages до /JEE, а затем в папку /image:

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