在Heroku Cedar上部署Rails 3.1.3后的图像desapears

问题描述

在heroku雪松部署后，图像desapear。

我有一个CSS：

 ：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放入 app / assets / images / datatables / code>本地工作，但不在Heroku上。

我也可以使用 = asset_tag（'datatables / icon.png'） ...，但如何做到这一点内CSS？

我也试过 config.action_dispatch.x_sendfile_header = nil 在 config / environments / production.rb 中没有成功。

解决方案

在生产环境中，资产将在其URL中附加MD5指纹。使用资产路径助手是非常重要的，以便使用正确的文件名。

看来您使用Haml，基于 ：css filter。

在Haml中，您可以使用＃{ruby}

 ：css 
 table.table thead .sorting {background-image ：url（＃{asset_path（'datatables / sort_both.png'）}）} 
 ...等等。 
  

如果您使用的是Sass / SCSS，则可以使用内置的资产助手。

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。它最干净最瘦。

After deploy on heroku cedar, images desapear.

I've a CSS like :

: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; }

and relative png into app/assets/images/datatables/Locally works, but not on Heroku.

I could also use = asset_tag('datatables/icon.png') ..., but how to do it inside CSS ?

I've also tried config.action_dispatch.x_sendfile_header = nil in config/environments/production.rb without success.

解决方案

In the production environment the assets will have an MD5 thumbprint appended to their URL. It is important that you use the asset path helpers so that the right filename is used.

It appears that you are using Haml, based on the :css filter.

In Haml you can interpolate Ruby into the doucment with #{ ruby }

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

If you are using Sass/SCSS, you can use the built in asset helpers.

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

Its a little more complicated if you are using plain CSS. You'll need to append .erb to the css file. ('assets/stylesheets/file.css.erb')

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

You should use Sass or SCSS. Its the cleanest and leanest.

这篇关于在Heroku Cedar上部署Rails 3.1.3后的图像desapears的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！