Backstretch images are not displayed

Question

我正在尝试为rails 4应用程序使用backstretch（single或slideshow）。我已经安装了最新版本的backstretch-rails 2.0.4。经过一些初始困难后，我能够将图像显示在本地主机上。

我现在已经试图部署到heroku并且图像不显示。这些图片是公开/资产/图片，但我也将它们包含在内，并在应用程序/资产中指向它们（没有任何变化）。我已经预编译了这些资产，尝试使用RAILS_ENV =生产捆绑包执行rake资产：预编译和heroku运行rake资产：预编译。这些资产似乎正在写给heroku。仍然没有图像。

我也看到它可能是js不工作的问题（JavaScript not loading on Heroku but works locally），所以我安装了jquery-migrate。我还在config/environments/production.rb中将config.serve_static_assets更改为true。由于改变回来似乎没有解决。

我也许尝试了更多的东西，SOF上的其他人建议修复我读过的类似问题。

图像仍然没有出现在heroku上。有任何想法吗？预先感谢您的任何建议！

这是我的Gemfile：

source 'https://rubygems.org' 
ruby '2.0.0' 

gem 'sass-rails', '4.0.0' 
gem 'rails', '4.0.0' 
gem 'bcrypt-ruby', '3.0.1' 
gem 'will_paginate', '3.0.4' 
gem 'bootstrap-will_paginate', '0.0.9' 
gem 'rmagick', '2.13.2', :require => 'RMagick' 
gem 'carrierwave', '0.9' 
gem 'backstretch-rails', '~>2.0.4' 
gem 'jquery-migrate-rails','1.2.1' 
gem 'railties','~>4.0.0' 

group :development, :test do 
    gem 'sqlite3', '1.3.8' 
    gem 'rspec-rails', '2.13.1' 
    gem 'guard-rspec', '2.5.0' 
    gem 'spork-rails', '4.0.0' 
    gem 'guard-spork', '1.5.0' 
    gem 'childprocess', '0.3.6' 
end 

group :test do 
    gem 'selenium-webdriver', '2.35.1' 
    gem 'capybara', '2.1.0' 
    gem 'factory_girl_rails', '4.2.1' 
end 


gem 'uglifier', '2.1.1' 
gem 'coffee-rails', '4.0.0' 
gem 'jquery-rails', '3.0.4' 
gem 'turbolinks', '1.1.1' 
gem 'jbuilder', '1.0.2' 

group :doc do 
    gem 'sdoc', '0.3.20', require: false 
end 

group :production do 
    gem 'pg', '0.15.1' 
    gem 'rails_12factor', '0.0.2' 
end 

gem "better_errors", "0.3.2" 
gem "binding_of_caller" 

这是我的application.js：

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap/bootstrap 
//= require jquery.backstretch 
//= require_tree . 

这是我的看法：

$.backstretch([ 
     "/assets/images/1.png" 
     , "/assets/images/2.png" 
     , "/assets/images/3.png" 
    ], {duration: 3000, fade: 750}); 
</script> 

Answer 1

我猜你可能会具有与该asset-pipeline增加一个哈希在生产您的图像问题，您可能需要使用asset_path，检查出Rails Guide for Asset Pipeline - 第2.3节的更多细节，但一个例子是是

尝试在你看来

$.backstretch([ 
     "<%= asset_path '1.png' %>" 
     , "<%= asset_path '2.png' %>" 
     , "<%= asset_path '3.png' %>" 
    ], {duration: 3000, fade: 750}); 
</script> 

更新（在评论的问题）：尝试在$(document).ready();包裹它，所以它运行后，整个DOM是准备和jquery.backstretch天秤座ry加载。

$(document).ready(function() { 
    $.backstretch([ 
      "<%= asset_path '1.png' %>" 
      , "<%= asset_path '2.png' %>" 
      , "<%= asset_path '3.png' %>" 
     ], {duration: 3000, fade: 750}); 
}); 
</script> 

希望这有助于