Question

我正在尝试使用backstretch（单曲或幻灯片）作为rails 4 app。我安装了最新版本的backstretch-rails 2.0.4。经过一些初步的困难后，我能够将图像显示在我的本地主机上。

我现在一直在尝试部署到heroku并且图像没有显示。图像是在公共/资产/图像中，但我也包括它们并在应用程序/资产中指向它们（没有变化）。我已经预编译了资产，尝试了RAILS_ENV =生产包exec 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库之后运行。

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

希望这有帮助

后退图像不显示

1 个答案: