Ruby on Rails - 图像未在 Firefox 和 Chrome 上加载但在 Safari 上正确加载答案

【问题标题】：Ruby on Rails - images not loading on Firefox and Chrome but load correctly on SafariRuby on Rails - 图像未在 Firefox 和 Chrome 上加载但在 Safari 上正确加载
【发布时间】：2013-07-27 01:13:35
【问题描述】：

我已经尝试了很多替代方法来解决这个问题，现在我不知道还能做什么。我正在使用 ruby 1.9.3p362（2012-12-25 修订版 38607）和 Rails 3.2.8

我的主页在 Safari 上看起来不错，但是当我尝试在 Chrome 或 Firefox 上加载它时出现很多问题。 See the site here 我只能想象它在 IE 中的混乱。

更新 - 以下是问题：

有些图片没有出现
出现的图像不响应其 css 类
当我尝试按照图片地址 (appaddress/assets/image_name.jgp) 进行操作时 - 我在 Chrome 上收到损坏的图片链接，并且在 Firefox 上出现“此图片无法显示，因为它包含错误”。

然而，所有这些图像在 Safari 上看起来都很漂亮且表现良好。

这是视图文件（仅相关部分）：

<div class="masthead">

        <h1 align="center"> <%= image_tag "logoBW6.png", class: "header-image" %></h1>
</div>
 <div class="span6 image-overlay">
               <h3 align="center"> 
           <%= cl_image_tag(@blogs.first.image,  :transformation =>[ 
            { :width => 650, :height => 615, :crop => :fill, 
             :gravity => :south}]) %></h3>
       <a href=<%= blog_path(@blogs.first) %>><h2 align="left" class="overlay overlay-background"><%= image_tag "empty_banner.png" %></h2><h2 class="overlay text-overlay"><%= @blogs.first.title%></h2></a>
       <br /><%= @blogs.first.post.first(50) %>...
      </div>
    <div class="span6 image-overlay">
               <h3 align="center"> 
           <%= cl_image_tag(@blogs.first(2)[1].image,  :transformation =>[ 
            { :width => 650, :height => 615, :crop => :fill, 
             :gravity => :south}]) %></h3>
       <a href=<%= blog_path(@blogs.first(2)[1]) %>><h2 align="left" class="overlay overlay-background"><%= image_tag "empty_banner.png" %></h2><h2 class="overlay text-overlay"><%= @blogs.first(2)[1].title%></h2></a>
       <br /><%= @blogs.first(2)[1].post.first(300) %>...
      </div>
 </div>
    </div>

Application.rb:

require File.expand_path('../boot', __FILE__)

require 'rails/all'
require 'csv'

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require(*Rails.groups(:assets => %w(development test)))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

module Chic
  class Application < Rails::Application
    config.encoding = "utf-8"
    config.filter_parameters += [:password]
    config.active_support.escape_html_entities_in_json = true
    config.active_record.whitelist_attributes = true
    config.assets.enabled = true
    config.assets.version = '1.0'
    config.assets.initialize_on_precompile = false
     config.assets.prefix = "/assets"
  end
end

生产.rb

Chic::Application.configure do
  config.cache_classes = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_assets = true
  config.assets.compress = true
  config.assets.compile = true
  config.assets.digest = true
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.action_mailer.default_url_options = { host: "thenewoutfitproject.com" }
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :ses

end

任何建议将不胜感激！！！

谢谢！山姆

【问题讨论】：

您到底遇到了什么问题？缺少图像？ JavaScript 错误？如果是第一个，您是否尝试过跟踪断开的链接？请更新您的帖子
刚刚更新。我已尝试按照图像进行操作，但它说它已损坏或包含错误。我有一种感觉，这一切都在资产管道中。通过全局变量来自模型的图像在任何地方都可以正常工作。
那么奇怪的是，我可以在 Safari 而不是 Chrome 中很好地查看到您的徽标的图像 URL。只是为了确认您确定问题不在于图像本身吗？您可以从桌面在 Chrome 中本地加载图像吗？ thenewoutfitproject.com/assets/…
是的，这就是我的观点——它在 Safari 中运行良好。太令人沮丧了！！！不，图像无法在 Chrome 或 Firefox 上加载，即使在本地也是如此。它适用于野生动物园。 @creativereason
对不起，我想你误解了我的意思。有时，如果您在 Photoshop 中选择了错误的文件名或颜色配置文件，图像可能会损坏。要确认不是这种情况，您可以将图像从 Finder 窗口拖到 Chrome 和 Firefox 中吗？如果渲染正确，则问题出在您的服务器 /asset 管道上，如果渲染不正确，则问题在于您在 Photoshop 中的保存方式。

标签： ruby-on-rails ruby google-chrome firefox asset-pipeline

【解决方案1】：

您的图像可能已损坏。有时这看起来像是资产管道错误，但实际上是由于在 Photoshop 中使用“保存为 Web”设置时意外使用了错误的文件名造成的。

【讨论】：