質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

814閲覧

TOPページで表示される画像が他のページだと表示されない。

yutaro_0529

総合スコア12

Twitter

Twitterは、140文字以内の「ツイート」と呼ばれる短文を投稿できるサービスです。Twitter上のほぼ全ての機能に対応するAPIが存在し、その関連サービスが多く公開されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Amazon S3

Amazon S3 (Simple Storage Service)とはアマゾン・ウェブ・サービスが提供するオンラインストレージサービスです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/18 02:53

編集2020/11/18 03:04

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
(例)Ruby on railsでtwitterのようなシステムを作っています。
画像を表示させるための実装中に画像が表示出来なくなりました。

S3導入前は画像は表示されていました。
TOPページの画像表記の記述もエラーになっていたため、
改善し、TOPページは問題なく表示されるようになりました。

発生している問題・エラーメッセージ

画像を表示することが出来ない。

該当のソースコード

Ruby

1_show.html.erb 2<div class ="contents row"> 3 <%# <div class="content_post" style="background-image: url(<%= image_tag item.image ,class: 'item-image' if item.image.attached? %>);"> %> 4 <div class="content_post" style="background-image: url(<%= @item.image %>);"> 5 <% if user_signed_in? && current_user.id == @item.user_id %> 6 <div class="more"> 7 <span><%= image_tag 'arrow_top.png' %></span> 8 <ul class="more_list"> 9 <li> 10 <%= link_to '編集', edit_item_path(@item.id), method: :get %> 11 </li> 12 <li> 13 <%= link_to '削除', item_path(@item.id), method: :delete %> 14 </li> 15 </ul> 16 </div> 17 <% end %> 18 <p><%= @item.text %></p> 19 <span class="name"> 20 <a href="/users/<%= @item.user.id %>"> 21 <span>投稿者</span><%= @item.user.nickname %> 22 </a> 23 </span> 24 </div> 25</div>

試したこと

Ruby

1_item.html.erb 2 3<div class="content_post" style="background-image: url(<%= @item.image %>);"> 4➡︎コードを変更<div class="content_post" style="background-image: url(<%= url_for(item.image) %>) ;"> 5 6コードを変更しても表記は両方ともされなかったです。

補足情報(FW/ツールのバージョンなど)

Ruby

1_item.html.erb 2<div class="content_post" style="background-image: url(<%= url_for(item.image) %>) ;"> 3 <div class="more"> 4 <span><%= image_tag 'arrow_top.png'%></span> 5 <ul class="more_list"> 6 <li> 7 <%= link_to '詳細', item_path(item.id), method: :get%> 8 </li> 9 <% if user_signed_in? && current_user.id == item.user_id %> 10 <li> 11 <%= link_to '削除', item_path(item.id), method: :delete %> 12 </li> 13 <li> 14 <%= link_to '編集',edit_item_path(item.id), method: :get %> 15 </li> 16 <% end %> 17 </ul> 18 </div> 19 <p><%= item.text %></p> 20 <span class="name"> 21 <a href="/users/<%= item.user.id %>"> 22 <span>投稿者</span><%= item.user.nickname %> 23 </a> 24 </span> 25 </div> 26 27このコードでTOPページの画像は表示されていました。 28

補足情報追加11/18 12:03

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: 自身のバケット名 環境設定 config/enviloment/developments.rb 最後の記述 # default_url_options[:host] = "localhost:3000" host = 'samplehost' Rails.application.routes.default_url_options[:host] = host #おそらく本番環境productionにも定義 ここを記載してlocalでは表示させることが出来ました。 url_forメソッドを使用して

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2020/11/18 02:58

「S3導入」とありますが、 ・S3に置くようにした対象は何でしょうか? ・それは、どの箇所にどのような設定を行ったのでしょうか?
yutaro_0529

2020/11/18 03:03

早速ご回答頂きありがとうございます。 補足情報を編集して記載させていただきます!!
maisumakun

2020/11/18 03:12

すでに保存した画像はS3へ移動しましたか?
yutaro_0529

2020/11/18 03:49

はい!保存した画像はS3に移動しています。 S3の保存先データ: https://gyazo.com/d8c4c1d6a1bfe10cd9d5e5aab5c55211 まだよく理解出来ていないのですが、ローカルのActiveStorageにもデータが保存されており、 ローカル環境でWEBアプリで画像を投稿するとActiveStorageにも画像データが保存されている状況だと思います。 Active Storageの保存データ: https://gyazo.com/cce1fa5fdff6c3cc5e91994c0098789f
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問