Heroku Cedar에서 Rails 3.1.3을 배포 한 후에 이미지가 흐림

Question

heroku cedar에 배포 한 후 이미지가 사라집니다. app/assets/images/datatables/에

:css 
    /* */ 
    table.table thead .sorting { background: url('assets/datatables/sort_both.png') no-repeat center right; } 
    table.table thead .sorting_asc { background: url('assets/datatables/sort_asc.png') no-repeat center right; } 
    table.table thead .sorting_desc { background: url('assets/datatables/sort_desc.png') no-repeat center right; } 
    /* */ 
    table.table thead .sorting_asc_disabled { background: url('assets/datatables/sort_asc_disabled.png') no-repeat center right; } 
    table.table thead .sorting_desc_disabled { background: url('assets/datatables/sort_desc_disabled.png') no-repeat center right; } 

상대 PNG 로컬로 작동하지만,하지 Heroku가에 :

나는 같은 CSS를했습니다.

= asset_tag('datatables/icon.png') ...도 사용할 수 있지만 CSS 내부에서 어떻게 처리합니까?

나는 또한 config.action_dispatch.x_sendfile_header = nil을 config/environments/production.rb에 시도했지만 성공하지 못했습니다.

Answer 1

프로덕션 환경에서 자산에는 URL에 MD5 지문이 추가됩니다. 자산 경로 도우미를 사용하여 올바른 파일 이름을 사용하는 것이 중요합니다.

:css 필터를 기반으로 Haml을 사용하고있는 것으로 보입니다.

는 HAML에서 당신은 자산 헬퍼 내장 사용할 수 있습니다, 당신은 말대꾸/SCSS를 사용하는 경우 #{ ruby }

:css 
    table.table thead .sorting { background-image: url(#{ asset_path('datatables/sort_both.png')}) } 
    ... and so on. 

으로 doucment에 루비를 보간 할 수 있습니다.

table.table thead .sorting { 
    background-image: asset-url('datatables/sort_both.png'); 
} 

일반 CSS를 사용하는 경우 다소 복잡합니다. .erb 파일을 css 파일에 추가해야합니다. ('assets/stylesheets/file.css.erb')

table.table thead .sorting { 
    background-image: url(<%= asset_path('datatables/sort_both.png') %>); 
} 

Sass 또는 SCSS를 사용해야합니다. 그것은 가장 깨끗하고 가장 희박합니다.

Answer 2

방금 ​​나 자신을 작동 시켰습니다.

열쇠는 당신의 application.rb에이 라인을두고있다 :

config.assets.initialize_on_precompile = false 

당신이 jquery-datatables-rails 보석을 사용하고 있습니까? 그렇지 않다면,해야합니다!

gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails' 

을 실행 : 당신의 gemfile에이 라인을 넣어

이

번들

참고 설치 : 자산 그룹에 넣지 마십시오에 배포 할 때 작동하지 않습니다 heroku (자산 그룹이 프로덕션에서 사용되지 않았기 때문에).

또한

, 당신의 application.rb이 줄을 추가해야합니다 (죄송 반복,하지만 중요한)합니다

//= require dataTables/jquery.dataTables 
//= require dataTables/jquery.dataTables.bootstrap 

이 추가

config.assets.initialize_on_precompile = false 

이 application.js에 이러한 추가 your application.css :

*= require dataTables/jquery.dataTables.bootstrap 

그리고 이것을 js에 추가하십시오.

당신이 사용하는 경우 액체 용기 : 컨트롤러 커피 파일은 당신의 datatables를 사용하는

#// For fluid containers 
$('#dashboard').dataTable({ 
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
}); 

당신이 고정 사용하는 경우에는 폭 용기 :

#// For fixed width containers 
$('.datatable').dataTable({ 
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", 
    "sPaginationType": "bootstrap" 
});