Rails 5.2.1在View上的图像即使在src中显示正确的URL,也无法通过Paperclip与AWS一起显示

时间:2018-12-24 14:37:28

标签: ruby-on-rails ruby amazon-web-services amazon-s3 paperclip

这可能只是一个简单,明显的解决方法,尽管我已经阅读了类似的问题并尝试了解决方案,但我似乎无法弄清楚。

我有一个包含图片的Post模型。当我上传图像时,它成功上传到了AWS,但是当我查看该帖子时,该帖子未显示它。

我的S3存储桶策略已设置好,每个人都可以查看。

我的config/environments/production.rb文件中的AWS Paperclip设置为:

 [...]
  config.paperclip_defaults = {
    storage: :s3,
    s3_credentials: {
      bucket: Rails.application.credentials.dig(:aws, :bucket_name), 
      access_key_id: Rails.application.credentials.dig(:aws, :access_key_id), 
      secret_access_key: Rails.application.credentials.dig(:aws,
      :secret_access_key), 
      s3_region: Rails.application.credentials.dig(:aws, :region),
      s3_storage_class: :reduced_redundancy
    }
  }

这是我的帖子模型:

class Post < ApplicationRecord
    belongs_to :user
    has_many :comments, dependent: :destroy
    has_many :likes, dependent: :destroy
    has_many :dislikes, dependent: :destroy
    attr_accessor :uploaded_image_for_io_adapters, :file_name, :top_text, :bot_text


    has_attached_file :image, styles: {   
        square: "250x250#",
        large:  "500x550!"
    }, 
    :convert_options => {
      :medium => "-quality 100 -strip"
    }, 
    default_url: "/images/:style/missing.png"
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
  validates_attachment :image, presence: true
  validates_presence_of :poster
    validates_presence_of :description
    validates :user, presence: true
    validates :user_id, presence: true
end

我的app/views/posts/show.html.erb

<div class="container">
  <center><table border="0" style="max-width: 500px;">
    <tr>
      <td colspan="2"><%= image_tag @post.image.url(:large) %></td>
    </tr>
    <tr>
      <td colspan="2"><h3 class="text-left"><%= @post.description %></h3></td>
    </tr>
    <tr valign="top">
      <td>
    <p>Posted by: <%= @post.poster %></p>
    <p><small class="text-muted"><%= @post.created_at %></small></p>
      </td>
      <td><p class="text-right">
        <div class="voting" style="text-align:center;" id="voting-div">
            <%= render partial: 'posts/likes', locals: {post: @post}  %>
            <%= render partial: 'posts/dislikes', locals: {post: @post}  %>
            <%= render partial: 'posts/post_score', locals: {post: @post}  %>
        </div>
      </p></td>
    </tr>
    <tr>
      <td colspan="2"><p><a href="#" class="glyphicon glyphicon-flag"> Flag as inappropriate</a></p></td>
    </tr>
  </table></center>
  <%= link_to 'Back', url_for(:back) %>
</div>

这是有趣的部分。在未显示图像的帖子页面上,当我View Page source时,我在图像源下看到: <td colspan="2"><img src="//bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/large/_editedimage_.png?1545616391"/></td>如屏幕快照page source displaying image

当我Copy Link Location粘贴时,URL为http://bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/large/_editedimage_.png?1545616391。该URL在我尝试的每台计算机上显示上载的图像,这使我怀疑问题出在我的视野中。我感谢任何指针

编辑

当我检查控制台时,看到以下错误:

  

内容安全政策:该页面的设置禁止加载   的资源   http://bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/square_editedimage_.png?1545616391   (“ img-src”)。

1 个答案:

答案 0 :(得分:1)

如果您在https中运行站点,则需要确保还通过https来提供S3链接,以避免使用Content Security Policy error。该答案应该可以帮助您配置图像链接以在https上投放。 Is it possible to configure Paperclip to produce HTTPS urls?

简短的答案是使用s3_protocol选项:

s3_protocol: :https,或者您的情况为s3_protocol: :http

https://www.rubydoc.info/github/thoughtbot/paperclip/master/Paperclip/Storage/S3