代码之家  ›  专栏  ›  技术社区  ›  stephenmurdoch

Rails 3-第一页视图上的图像呈现不正确

  •  1
  • stephenmurdoch  · 技术社区  · 14 年前

    在我的Rails3应用程序中,我有一个图像库,其中:

    画廊有很多图片 图片属于图库 < /代码>

    我正在使用CarrierWave将图像上载到S3。

    “我的库”页面(“显示”操作)显示该库中每个图像的缩略图。

    当用户单击缩略图时,我使用颜色框以模态方式显示图像。

    我经常在点击图片后看到:

    我想看到的是:

    我做了很多故障排除:

    • 尝试使用FancyBox而不是ColorBox-相同问题
    • 尝试使用不同的载波分支-相同的问题
    • 试着把我的照片放在欧洲的桶里(我在欧洲)——同样的问题
    • 尝试了将我的图像与图库一起加载-同样的问题
    • 尝试使用Google托管的jquery 1.4.1和1.4.3-同样的问题
    • 把所有东西都上传到Heroku上-同样的问题
    • 尝试显式设置颜色框的宽度(以及其他各种内容分隔)
    • 已编辑S3 Bucket的ACL
    • 使用html5 doctype for images.html.haml(图像控制器布局)

    这往往是我第一次单击缩略图时 如果在失败后立即再次单击缩略图,问题就会消失……我的拇指指甲从来没有问题,它们都很结实。似乎第一次尝试时并没有下载图像的大(原始)版本。

    • 我的日志中没有错误。
    • 这简直让我发疯。
    • 我使用的是Fog Gem 0.3.13版。

    我还能在这里做什么?我还可以尝试哪些故障排除?任何帮助都将不胜感激。

    以下是我的一些代码:

    class image<activerecord::base
    属于画廊
    装载上传器:照片,图像上传器
    收件人:照片,:图库
    验证照片的存在
    结束
    
    类库<ActiveRecord::Base
    默认的范围顺序(“id desc”)
    有很多:图片
    attr_accessible:name,:images_attributes,:描述
    接受\u个嵌套的属性\u用于:图像,:拒绝\u如果=>:全部\u空白,:允许\u销毁=>真
    验证:name的存在
    结束
    
    #图片/show.html.haml
    =image_tag@image.photo_url if@image.photo_url
    
    #库/show.html.haml
    -用于Gallery.images中的图像
    图像
    =link_to image_tag(image.photo_url(:thumb)),image_path(image),:name=>“modal”,:class=>“group”if image.photo_url(:thumb)
    
    #布局/images.html.haml
    !!!!五
    %HTML
    %体
    α图像
    =产量
    < /代码> <

    我用CarrierWave把图片上传到S3。

    “我的库”页(“显示”操作)显示该库中每个图像的缩略图。

    当用户单击缩略图时,我使用颜色框以模态方式显示图像。

    我经常在点击图片后看到:

    good_image

    我想看到的是:

    bad_image

    我做了很多故障排除:

    • 尝试使用FancyBox而不是ColorBox-相同问题
    • 尝试使用不同的载波分支-相同的问题
    • 试着把我的照片放在欧洲的桶里(我在欧洲)——同样的问题
    • 尝试了将我的图像与图库一起加载-同样的问题
    • 尝试使用Google托管的jquery 1.4.1和1.4.3-同样的问题
    • 把所有东西都上传到Heroku上-同样的问题
    • 尝试显式设置颜色框的宽度(以及其他各种内容分隔)
    • 已编辑S3 Bucket的ACL
    • 使用html5 doctype for images.html.haml(图像控制器布局)

    这倾向于 第一次单击缩略图 上传后 虽然我注意到它发生在我一个多小时没有点击的图片上。如果在失败后立即再次单击缩略图,问题就会消失……我的拇指指甲从来没有问题,它们都很结实。似乎第一次尝试时并没有下载图像的大(原始)版本。

    • 我的日志中没有错误。
    • 这简直让我发疯。
    • 我使用的是雾宝石0.3.13版。

    我还能在这里做什么?我还可以尝试哪些故障排除?任何帮助都将不胜感激。

    以下是我的一些代码:

    class Image < ActiveRecord::Base
      belongs_to :gallery
      mount_uploader :photo, ImageUploader
      attr_accessible :photo, :gallery_id
      validates_presence_of :photo
    end
    
    class Gallery < ActiveRecord::Base
      default_scope order("id DESC")
      has_many :images
      attr_accessible :name, :images_attributes, :description
      accepts_nested_attributes_for :images, :reject_if => :all_blank, :allow_destroy => true
      validates_presence_of :name
    end
    
    #images/show.html.haml
    = image_tag @image.photo_url if @image.photo_url
    
    #galleries/show.html.haml
    - for image in gallery.images
      .image
        = link_to image_tag(image.photo_url(:thumb)), image_path(image), :name=>"modal", :class=>"group" if image.photo_url(:thumb)
    
    #layouts/images.html.haml
    !!! 5
    %html
      %body
        #image
          = yield
    
    1 回复  |  直到 14 年前
        1
  •  1
  •   tadman    14 年前

    我怀疑你的问题与CSS有关,而不是与应用程序本身有关。第一次加载图像时,浏览器将不知道它的宽度或高度,因此它以一定的任意大小(通常是错误的大小)进入。随后的请求将很快从缓存加载图像,可能在javascript有机会运行之前,这意味着宽度和高度属性已正确填充。

    您可以通过将宽度和高度属性放入发送到客户机的HTML中来解决这个问题。像回形针这样的附件系统允许您提取和保存这些信息,但默认情况下不这样做。