0

我正在尝试对 rails 4 应用程序使用 backstretch（单张或幻灯片）。我已经安装了最新版本的 backstretch-rails 2.0.4。经过一些初步的困难，我能够让图像显示在我的本地主机上。

我现在一直在尝试部署到 heroku，但图像没有显示。这些图像在 public/assets/images 中，但我也将它们包括在内并在 app/assets 中指向它们......（没有变化）。我已经预编译了资产，同时尝试了 RAILS_ENV=production bundle exec rake assets:precompile 和 heroku run rake assets:precompile。这些资产似乎正在写信给heroku。仍然没有图像。

我还看到这可能是 js 不工作的问题（JavaScript 不能在 Heroku 上加载但在本地工作）所以我安装了 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>
4

1 回答 1

1

我猜你可能asset-pipeline在生产中为你的图像添加哈希时遇到问题，你可能想要使用asset_path，查看Rails Guide for Asset Pipeline - Section 2.3 了解更多详细信息，但一个例子是

在你看来尝试

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

更新（针对评论中的问题）：尝试将其包装在 a 中$(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>

希望这可以帮助

于 2013-11-28T04:43:00.000 回答