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

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

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

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

528閲覧

Active Storageで投稿した画像をmodalを使って拡大表示させる方法

tomomomo

総合スコア22

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/12/07 03:46

現状と実現したいこと

現在railsでツイッタークローンアプリを作成しています。
もともとrefileのgemを使って画像投稿機能を実装していたのですが、railsのバージョンが5.2.6でありactivestorageが推奨されていること、デプロイをした本番環境では正常に画像投稿ができなかった(refileが長年アップデートされていないのが原因?)こともありactivestorageでの開発を進めています。

refileでは投稿された画像をクリックしたときに拡大表示がされるような記述ができていました。
modalで画像を識別する際には、idに<%= post.image_id %>というものを持たせていました。
これはrefileの場合カラムを別に追加しなくてはいけないので使えていましたが、activestorageではカラムが不必要ということもあり、任意の画像をどうとって来れば良いのかわからない状況です。
また、問題である部分が今述べたところなのかもまだ判定できていません。
挙動はこちらです↓
https://i.gyazo.com/0210777bec3f4f6962bffb8108fd960c.mp4
下記に該当のコード等載せさせていただきます。

html

1 <div data-toggle="modal" data-target="#postimage<%= post.image_id %>"> 2 <% post.images.each do |image| %> 3 <%= image_tag post.images[0], size:"80x80" if post.images.attached? %> //ここで投稿した画像(拡大前)を表示 4 <% end %> 5 </div> 6 7 <!-- Modal --> 8 <div class="modal fade" id="postimage<%= post.image_id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 9 <div class="modal-dialog" role="document"> 10 <div class="modal-content"> 11 <div class="modal-header" style="height: 10px;"> 12 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 13 <span aria-hidden="true">&times;</span> 14 </button> 15 </div> 16 <div class="modal-body"> 17 <%= image_tag post.images[0], size:"450x450" if post.images.attached?%> //拡大後 18 </div> 19 </div> 20 </div> 21 </div>
<!-- Modal -->の1行目でid="postimage<%= post.image_id %>"としていますが、現状ではactivestorageで画像を投稿しているのでimage_id=nilとなっており取得することができない状況です。

ひとつわからない点が、下記の部分で|image|としているのでimage_tagでimages=>imageとするべきだと思うのですが、そうするとNoMethodエラー(Did you mean? images)が出ます。

Html

1<% post.images.each do |image| %> 2 <%= image_tag post.images[0], size:"80x80" if post.images.attached? %> 3<% end %>

どなたかお力添えお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問