投稿した画像をimage_tag もしくはurl_forを使って背景に表示させたい。
前提・実現したいこと
Ruby on railsで画像が投稿できるシステムを作っています。
画像を背景に表示させたい。
発生している問題・エラーメッセージ
active storageに投稿した画像を保存し、
その後、AWSのS3に投稿して画像を保存して表示させようとすると、エラーが発生し、HTMLの記述を修正しました。
画像データはレコードに正常に送られているのは確認出来たのですが、
表示する際にエラーが起こり困っています。
_item.html.erbの画像を表示させるコードに問題があると思います。
該当のソースコード
Ruby on rails
app/veiws/veiws/_item.html.erb
<div class="content_post" style="background-image:url(<%= image_tag item.image.variant(resize: '500x500'), class: 'item-image' if item.image.attached? %>
上記のコードだとサーバーにアクセスできるが画像が表示されないです。
<div class="more">
<span><%= image_tag 'arrow_top.png'%></span>
<ul class="more_list">
<li>
<%= link_to '詳細', item_path(item.id), method: :get%>
</li>
<% if user_signed_in? && current_user.id == item.user_id %>
<li>
<%= link_to '削除', item_path(item.id), method: :delete %>
</li>
<%# Prefixの引数 %>
<%# アイテムのID（item.id） %>
<%# HTTPメソッドは、DELETEというHTTPメソッド %>
<%# methodオプションにシンボルで:delete %>
<li>
<%= link_to '編集',edit_item_path(item.id), method: :get %>
<%# get サーバーからブラウザに情報を返す。単にウェブサイトを閲覧する際など、情報を取得するために利用される。 %>
<%# Prefixでパスを確認 %>
</li>
<% end %>
</ul>
</div>
<p><%= item.text %></p>
<span class="name">
<a href="/users/<%= item.user.id %>">
<span>投稿者</span><%= item.user.nickname %>
</a>
</span>
</div>
>
試したこと
下記コードだとエラーが発生、S3に保存前は画像が表示出来ました。
<div class="content_post" style="background-image: url(<%= Rails.application.routes.url_helpers.url_for(item.image) if item.image.attached? %>
下記のコードだとエラーが発生しました。
<div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
ブラウザで検証ツールを使うと、
localhost:3000から画像を取得しているのかと思いました。
https://gyazo.com/24ce9e4b016e4e889f4dcc04e3bede9e
➡︎エラー内容
<div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
上記のコードのエラー内容が下記です。
NoMethodError in Users#show
Showing /Users/uraokayuutarou/projects/nostalgia/app/views/items/_item.html.erb where line #1 raised:
undefined method `url' for #<ActiveStorage::Attached::One:0x00007fc943ceb120>
Extracted source (around line #1):
1
2
3
4
5
6
<div class="content_post" style="background-image: url(<%= url_for(item.image.url)=%>
<%# attached?メソッド レコードにファイルが添付されているかどうか モデル.ファイル名.attached? %>
<%# image_tagメソッド img要素を生成するRailsのヘルパーメソッド %>
<%# image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成 %>
<div class= more>
<span><%= image_tag 'arrow_top.png'%></span>
Trace of template inclusion: #<ActionView::Template app/views/users/show.html.erb locals=[]>
Rails.root: /Users/uraokayuutarou/projects/nostalgia
Application Trace | Framework Trace | Full Trace
app/views/items/_item.html.erb:1
app/views/users/show.html.erb:4
app/views/users/show.html.erb:3
Request
Parameters:
{"id"=>"1"}
Toggle session dump
Toggle env dump
Response
Headers:
None
https://gyazo.com/17411c4b60fe029ecbe7f89f2b7156e2
補足
S3はバケットを作成して、バケットポリシーを編集、
Gemfieにgem "aws-sdk-s3", require: falseをbundle installしました。
その後config/enviroments/delopment.rbにconfig.active_storage.service = :amazonにlocalから変更。
次に「パブリックアクセスをすべてブロック」のチェックを外す。
新規のパブリックバケットポリシー,任意のバケットポリシーにチェックを入れました。
config/storage.ymlに追記
amazon:
service: S3
access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
region: ap-northeast-1
bucket: 自身のバケット名
1)S3にsaveできたというのは、WEBページのAWSのS３のオブジェクトで確認しました。
2)item_params の中身 => <ActionController::Parameters {"text"=>"パンツ", "image"=>#<ActionDispatch::Http::UploadedFile:0x00007fefc2b84c78 @tempfile=#<Tempfile:/var/folders/qp/vfswzv852_x8zy3q27gp1gt00000gn/T/RackMultipart20201106-6566-1l80iav.png>, @original_filename="スクリーンショット 2020-11-06 19.46.55.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"item[image]\"; filename=\"\xE3\x82\xB9\xE3\x82\xAF\xE3\x83\xAA\xE3\x83\xBC\xE3\x83\xB3\xE3\x82\xB7\xE3\x83\xA7\xE3\x83\x83\xE3\x83\x88 2020-11-06 19.46.55.png\"\r\nContent-Type: image/png\r\n">, "user_id"=>1} permitted: true>
3)item modelの定義
params.require(:item).permit(:text, :image ).merge(user_id: current_user.id
0
