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

Question

This might just be a simple, obvious fix, although I have read similar questions and attempted solutions, I can't seem to figure it out.

I have a Post model which contains an image. When I upload the image, it successfully uploads to AWS but the post does not display it when I view that post.

My S3 bucket policy has been set so everyone can view.

I have my AWS Paperclip settings in my config/environments/production.rb file as:

 [...]
  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
    }
  }

Here is my Post model:

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

My 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>

Here is the interesting part. On the post page where the image is not displayed, when I View Page source, I see under image source: <td colspan="2"><img src="//bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/large/_editedimage_.png?1545616391"/></td> as in the screenshot

When I Copy Link Location and paste, the URL is http://bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/000/016/large/_editedimage_.png?1545616391. This URL displays the uploaded image on every computer I try which makes me suspect that the problem is coming from my view. I appreciate any pointers

EDIT

When I check the console I see the following error:

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”).

Do you see any errors in your browser console? Might be a http/https issue. — NM Pennypacker
@NMPennypacker Damn you were right!. I see an error on the console: Content Security Policy: The page’s settings blocked the loading of a resource at bucketname-images.s3.us-east-2.amazonaws.com/posts/images/000/… (“img-src”). — i_use_the_internet

NM Pennypacker NM Pennypacker · Accepted Answer · 2018-12-24T15:01:02

If you're running your site in https, you'll need to make sure that your S3 links are also served via https in order to avoid the Content Security Policy error. This answer should get you where you need to be in order to configure your image links to serve over https. Is it possible to configure Paperclip to produce HTTPS urls?

The short answer is to use the s3_protocol option:

s3_protocol: :https, or in your case s3_protocol: :http

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

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

EDIT

1 Answers