2011-09-11 5 views
25

Trong file CSS, bạn có thể lấy tên riêng của một tài sản hình ảnh (với dấu vân tay) bằng cách sử dụng:URL của hình ảnh trong mã JavaScript bằng cách sử dụng đường dẫn nội dung Rails 3.1?

background-image: url(image-url("rails.png")) 

nhưng làm thế nào để bạn làm như vậy từ một Javascript nộp?

+0

Bạn có thể sử dụng ví dụ về điều này trong CSS và HTML không? – kzh

+2

@kzh, tôi đã làm điều đó. – Pablo

+2

bạn nên sử dụng 'background-image: image-url (" rails.png ")'. không liên quan đến câu hỏi này mặc dù ... – raven

Trả lời

48

Tôi thấy bạn đang sử dụng phương pháp trợ giúp sass.

Trong tiêu chuẩn (không Sass) CSS bạn làm điều gì đó như thế này:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Các tập tin CSS sẽ cần phải có ERB thêm vào các phần mở rộng:

file_name.css.erb

Đối với javascript các quy tắc tương tự được áp dụng:

file_name.js.erb

và trong file:

var image_path = '<%= asset_path 'image.png' %>'

Các Rails asset pipeline guide là một nguồn tuyệt vời của thông tin về làm thế nào để sử dụng các tính năng này.

+6

Câu trả lời, trong ngắn hạn là, sử dụng erb. – Pablo

2

Trong Rails 4, thay vì sử dụng một cái nhìn js.erb tôi khuyên bạn nên dính vào các đường ống dẫn tài sản, và vượt qua các URL để nó với một biến thay vì sử dụng gon hoặc một số kỹ thuật khác được thảo luận tại địa chỉ: Ruby on Rails - Send JavaScript variable from controller to external Javascript asset file

Với gon :

app/views/layouts/application.html.erb:

<head> 
    <meta charset="utf-8"/> 
    <%= include_gon %> 

app/controllers/application_controller.rb:

01.
before_filter { gon.path = asset_path 'image.png' } 

ứng dụng/tài sản/Javascripts/file.js.coffee:

alert gon.path 

Phương pháp này là nhanh hơn bởi vì tập tin được biên dịch sẵn một lần duy nhất lúc khởi động, được phục vụ bởi các máy chủ thay vì thông qua Rails, và trên cùng một yêu cầu HTTP như phần còn lại của J.