Fancybox 不显示使用 CarrierWave 上传的图片

Question

我正在尝试使用 fancybox 来显示图像。当我使用静态图像时，作为资产文件夹中的现有图像，一切正常。但是，当我尝试使用使用carrierwave保存的上传图片时，它总是会显示下一条消息：“无法加载请求的内容。”。

我用来显示图片的代码是下一个：

app/models/upload.rb

class Upload
  include Mongoid::Document
  include Mongoid::Timestamps

  mount_uploader :file, UploadUploader

  # Fields
  field :file, type: String
  field :filename, type: String
  field :file64, type: String
  field :size_file, type: Integer
  field :file_extension, type: String

  # Validations
  validates_presence_of :file

  # Hooks
  before_validation do
    if not self.file.url and self.filename and self.file64
      sio = CarrierwaveStringIO.new( Base64.decode64( self.file64 ) )
      sio.original_filename = self.filename
      self.file = sio
      self.filename = nil
      self.file64 = nil
    end
  end

  before_save do
    self.size_file = self.size
    self.file_extension = File.extname( self.file.to_s )[1..-1]
  end

  def base64
    MIME::Types.type_of( self.file.url ).first.content_type
  end

  def size
    self.file.size
  end
end

应用/视图...

...
= link_to upload_path( upload.id ), class: 'fancybox' do
  = image_tag upload_path( upload.id ), height: 174, width: 256
...

应用程序/资产/javascript...

...
$( ".fancybox" ).fancybox()
...

我已经尝试了很多方法来使代码正常工作。例如，在视图中，我将link_tag的“href”和image_tag的“src”更改为上传的显示路径，但仍然不起作用。另外，我尝试使用 AJAX 加载图片并使用 fancybox 的“内容”属性，但我得到了相同的结果。最后，我为上传控制器创建了一个显示动作，其中我只显示图片并使用fancybox的“内容”和“类型”属性来使用html，但是我看不到图片（没有与url匹配的路由图片，而不是表演动作）。

我花了很多时间试图让它工作，但我找不到任何东西。提前致谢。

编辑：

app/controllers/upload_controller.rb

class UploadsController < ApplicationController
  load_and_authorize_resource

  respond_to :html, :json

  def show
    if request.format.html?
      content_type = MIME::Types.type_for( @upload.file.url ).first.content_type
      send_file @upload.file.url, content_type: content_type, disposition: 'inline', :x_sendfile => true
    else
      respond_with @upload, api_template: :general
    end
  end

  ...

app/uploaders/upload_...

class UploadUploader < CarrierWave::Uploader::Base
  storage :file

  def store_dir
    "#{ Rails.root.to_s }/uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  def cache_dir
    "#{ Rails.root.to_s }/tmp/uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"

  def extension_white_list
    %w(jpg jpeg png bmp tif)
  end
end

app/views/uploads/show.html.haml

= image_tag @upload.file_url.to_s

Answer 1

指定类型选项，强制内容类型。它可以设置为'image'、'ajax'、'iframe'、'swf'或'inline'

$( ".fancybox11" ).fancybox({
type: 'iframe', width: 380, height: 280
})

参考此链接fancybox api options。