Rails 5.2.1 使用 Paperclip 和 AWS 时视图上的图像不显示，即使它在 src 中显示正确 URL

Question

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

我有一个包含图像的 Post 模型。当我上传图像时，它成功上传到 AWS，但是当我查看 post 时 post 不显示它。

我的 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
    }
  }

这是我的 Post 模型：

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>

这是有趣的部分。在不显示图片的post页面上，当我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>如截图

当我Copy Link Location粘贴时，URL是http://bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/large/_editedimage_.png?1545616391。 URL 在我尝试的每台计算机上显示上传的图像，这让我怀疑问题出在我的观点上。感谢您的指点

编辑

当我检查控制台时，我看到以下错误：

Content Security Policy: The page’s settings blocked the loading of a resource at http://bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/square_editedimage_.png?1545616391 (“img-src”).

Answer 1

如果您运行您的网站位于 https，您需要确保您的 S3 链接也通过 https 提供，以避免 Content Security Policy error。这个答案应该让你到达你需要的地方，以便配置你的图像链接以服务于 https。

简短的回答是使用 s3_protocol 选项：

s3_protocol: :https，或者你的情况 s3_protocol: :http

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

Rails 5.2.1 使用 Paperclip 和 AWS 时视图上的图像不显示，即使它在 src 中显示正确 URL

Rails 5.2.1 Images on View not showing up using Paperclip with AWS even though it displays the correct URL in src

ruby-on-rails

ruby

amazon-web-services

amazon-s3

paperclip

编辑