rails apiの画像を表示したい

Question

apiの画像を表示する方法

<div><%= image_tag 'https://image.tmdb.org/t/p/w500'+array["poster_path"] %></div>

Answer 1

以下の可能性が考えられます。

• @array[0]["poster_path"]に正しいパスが入っていない
• 画像が違う場所にある
• そもそも画像がない

---

話を聞くとTMDbのAPIを経由して画像を取得されようとしているので、
必要な情報を追記しておきます。

https://developers.themoviedb.org/3/getting-started/images
上記のページの説明に書いてますが、３つのパーツが必要なようです。

• base_url
• file_size
• file_path

base_urlとfile_sizeに関してはconfiguration APIの項目に
書いてある、その方法で取得できるはずです。
file_pathはそのキーで用意されているわけではなく、
画像のファイルパスという意味合いのようです。
取得したいものによって異なり、poster_pathとかprofile_pathとか
そういう画像ファイルを示すキーになっています。
APIで取得したサンプル値を見れるので、参考にすればよいでしょう。

---

プロジェクトにおける画像パスについて

画像に限らずですが、パスはそのプロジェクト内における場所を示します。
先頭に/があると基本的にプロジェクトルートからのパスを示し、
先頭に/がないとそのファイル位置からのパスを示します。
※ライブラリのパス指定は異なります。

今回のように外部のサーバから画像を取得する場合は
http://xxx.yy.zz/xxx...のようにURLを指定します。
ただし、アクセス負荷等の対策でURL指定を禁止しているサイトもあるので、
使用する前に使用方法や利用規約等を確認しましょう。

Comments

[pokerStars]

"poster_path"=>"/ltUkDRbXYqmoebmMePtXwznHFaX.jpg",
配列のハッシュの中にはこのようにあるのですが、所得できていないのでしょうか？

[dice142]

> 所得できていないのでしょうか？
画像が表示されていない以上、取得はできていないのでしょう。
そのパスが正しいのか、画像の置いてある場所は正しいのかは私は判断できません。

[pokerStars]

apiでも所得できないということはあるのでしょうか？
rubyではないですが表示されている方もいらっしゃったので何かがおかしいということなんでしょうかね？

[dice142]

> apiでも所得できないということはあるのでしょうか？
提示されている情報からAPIを使っていることはわかりません。

> rubyではないですが表示されている方もいらっしゃったので何かがおかしいということなんでしょうかね？
３つほど考えられるものを回答しましたが、どうだったのでしょう？

[pokerStars]

/ltUkDRbXYqmoebmMePtXwznHFaX.jpgこれを検索してみたところ画像は表示されたので画像は存在しました。
「@array[0]["poster_path"]に正しいパスが入っていない」と「画像が違う場所にある」というのが確認の仕方がわからなかったです泣

[dice142]

APIで取得した画像とはどういうことでしょうか？プロジェクトルートにその画像があるということですか？

> 「@array[0]["poster_path"]に正しいパスが入っていない」
開発者ツールを開くとHTML構造が出てくるので、imgタグのsrcが正しいか確認してください。

> 「画像が違う場所にある」
画像が表示されたとのことですが、その画像はプロジェクトのどのフォルダにありますか？

[pokerStars]

tmdbというサイトのapiを使っています。
その中で、"poster_path": で画像を所得できるようです。

画像はどこにも保存していません。

>画像が表示された
IfB9hy4JH1eH6HEfIgIGORXi5h.jpgこのURLをGoogleで検索したら出てきたという意味でした。

[pokerStars]

> 「開発者ツールを開くとHTML構造が出てくる」
<img src="/vtsh28Oo4qSOtqOt2eiY3hkPpbg.jpg">このようになっていました

[dice142]

画像がプロジェクト内にあれば「/vtsh28Oo4qSOtqOt2eiY3hkPpbg.jpg」でいいですが、
プロジェクト内になければ「http://xxxx/xx...」などのように指定するしかないです。

参考にしているページがあればなるべくご提示ください。
また、ずっと気になってましたが、「所得」ではなく「取得」です。

[pokerStars]

vtsh28Oo4qSOtqOt2eiY3hkPpbg.jpgこのurlを「http://xxxx/xx...」の形にするにはどのようにするのがいいのでしょうか？

https://developers.themoviedb.org/3/getting-started/search-and-query-for-details　このapiを使っています。

全然きずかなかったです笑　お恥ずかしい... 収入みたいになってますね

[dice142]

> 「http://xxxx/xx...」の形にするにはどのようにするのがいいのでしょうか？
https://developers.themoviedb.org/3/getting-started/images
こちらの説明に書いてました。base_pathとfile_sizeとfile_pathが必要なようです。
base_pathとfile_sizeはconfigulation APIを見れば書いてあるようです。
file_pathは今回poster_pathを取得できているようなので、
base_pathとfile_sizeを取得してつなげれば良いでしょう。

[pokerStars]

質問文の編集をさせていただき、画像を貼らせてもらいました。
base_pathとfile_sizeはapiで所得できるというところなのですが、上記のような書き方でいいのでしょうか？

[dice142]

試した結果表示されればそれで良いかと思います。
（imgタグから外れていますが。）

コードを貼る時は画像ではなくコードブロックで直接質問文に載せたほうが良いです。
また、api keyは隠しましょう。

[pokerStars]

画像は表示されず、urlが文字で表示されてしまいます。

<%= image_tag(https://image.tmdb.org/t/p/w500<%= array["poster_path"] %>)%>
これではエラーになってしまったため
imgタグの入れ方がわからなくなりこのように書きました。

[dice142]

<%= %>の中はRubyの表記となります。入れ子で使えません。
文字列は「'」で囲み、変数はそのまま指定すればいいです。

[pokerStars]

<div><%= image_tag 'https://image.tmdb.org/t/p/w500'+array["poster_path"] %></div>
このようにすると所得することができました！！
長い間、付き合っていただき本当に感謝します！

[pokerStars]

あ、取得です！

[dice142]

無事解決できたようで、おめでとうございます。