Tiếp cận hình ảnh với url CSS() trong Primefaces

Question

Đây là từ các tài liệu Primefaces:

Nút Icons

Một biểu tượng vào một nút sẽ được hiển thị bằng CSS và thuộc tính hình ảnh.

<p:commandButton value=”With Icon” image=”disk”/> 

<p:commandButton image=”disk”/> 

.disk là một lớp css đơn giản với một tài sản nền:

.disk { background-image: url (‘disk.png’) quan trọng; }

Câu hỏi của tôi là: url này() trỏ tới đâu? Nói cách khác, tôi nên đặt hình ảnh của mình ở đâu để CSS có thể truy cập nó?

Tôi đã thử/resources,/resources/img, không may mắn. Có, nó đã được làm việc với một URL tuyệt đối (một trong đó bao gồm các đường dẫn ngữ cảnh), nhưng điều đó làm cho các ứng dụng không di động.

Answer 1

Dường như câu hỏi của bạn là quan tâm nhiều hơn với các khía cạnh client-side của sự vật, nên mặc dù tôi không biết Primefaces, đây là một đâm vào trả lời nó:

đường dẫn CSS có liên quan đến vị trí của nơi quy tắc CSS được khai báo.

Nếu đây là trong HTML của bạn (theo kiểu < kiểu > khối), thì disk.png phải nằm trong cùng một thư mục với tệp của bạn.

Nếu quy tắc này nằm trong tệp CSS riêng biệt, thì disk.png phải nằm trong thư mục chứa tệp CSS.

Nếu bạn tạo hình ảnh thư mục, khi đó thư mục sẽ tương đối từ CSS.

Hy vọng điều này sẽ giúp ích?

Answer 2

Giải pháp đơn giản:

NẾU bạn đang sử dụng JavaServer Faces 2.0, bạn có thể đặt tất cả các tài nguyên bên trong thư mục được thiết kế đặc biệt. Vì vậy, bạn cần phải có cấu thư mục này trong các ứng dụng web:

-rootdir 
--resources 
---images 
----disk.png 

Và để nhận được hình ảnh ở chế độ nền css bạn nên gõ một cái gì đó như thế này:

.disk { 
background: url(#{resource['images/disk.png']}) !important; 
} 

Answer 3

tôi phải đối mặt với cùng một vấn đề trong một khoảnh khắc và tôi tài liệu chi tiết về nó là không rõ ràng! Nó hoạt động theo cách này cho Primefaces CommandButton và tương tự (MenuItem, menu con, vv):

Những gì tôi đã làm là:

• Tải về một chủ đề từ thư viện theme trong PrimeFaces trang web (ví dụ: Aristo hoặc redmond) .
• Giải nén kho lưu trữ để ứng dụng web của bạn nguồn thư mục, (trong trường hợp của tôi: gốc/nguồn/css/Aristo
• Chú ý rằng trong thư mục Aristo bạn có: theme.css thư mục và/images nơi Hình ảnh png được lập chỉ mục chứa tất cả các biểu tượng được sử dụng bởi chủ đề
• Nếu bạn mở chủ đề.css bạn sẽ nhận thấy rằng để truy cập biểu tượng hình ảnh được lập chỉ mục, bạn nên gọi hai lớp: .ui-icon và .ui -icon-theiconyouwant (biểu tượng .ui truy xuất chỉ mục png bằng cách sử dụng #{resource['primefaces.......png']} và .ui-icon-agivenicon phân định biểu tượng theo X & vị trí Y (chỉ mục) trong hình ảnh png).
• Bây giờ, hãy xuất ra theme.css trong ứng dụng của bạn, bằng cách sử dụng **<h:outputStyleSheet />**. Cách tốt nhất để làm điều đó là giữa các thẻ mẫu của bạn.
• Vì vậy, trong xhtml hoặc jsp của bạn, làm **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Bây giờ nếu bạn muốn thêm hình ảnh cá nhân của bạn để sử dụng với một <p:commandButton, tạo các lớp học trong theme.css:

  .smiley { background-image: url ("# {resource ['images/smiley.png']}")! quan trọng;/điều này sẽ bị bỏ qua bởi Internet Explorer nếu không tương thích/ chiều rộng: 16px; chiều cao: 16px; }

  Thông thường JSF truy cập thư mục hình ảnh đầu tiên có sẵn trong thư mục tài nguyên của bạn.

• Bây giờ làm: <p:commandButton image="smiley" value="Smile" />