Backstretch images not displaying

Question

I'm trying to use backstretch (single or slideshow) for a rails 4 app. I have installed the latest version of backstretch-rails 2.0.4. After some initial difficulty I was able to get the images to display on my localhost.

I have now been trying to deploy to heroku and the images were not displaying. The images were in public/assets/images but I have also included them and pointed to them in app/assets... (with no change). I have precompiled the assets, trying both RAILS_ENV=production bundle exec rake assets:precompile and heroku run rake assets:precompile. The assets seem to be writing to heroku. Still no images.

I also saw that it could be an issue with js not working (JavaScript not loading on Heroku but works locally) so I've installed jquery-migrate. I also changed config.serve_static_assets to true in config/environments/production.rb. Since changed back as did not seem to resolve.

I probably tried a few more things too which others on SOF suggested as fixed to similar questions I've read.

Images still not appearing on heroku. Any ideas? Thanks in advance for any advice!

This is my 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"

This is in my application.js:

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

This is in my view:

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

Answer 1

I'm guessing that you might be having issues with the asset-pipeline adding a hash to your images in production, you might want to use asset_path, check out the Rails Guide for Asset Pipeline - Section 2.3 for more details but an example would be

Try in your view

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

Update (for the issue in the comments): Try wrapping it in a $(document).ready(); so it runs after the entire DOM is ready and the jquery.backstretch library loads.

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

Hope this helps