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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

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

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Q&A

解決済

1回答

4266閲覧

Cloudinaryにアップロードした画像が表示されない

crossism

総合スコア16

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 5

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

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

0グッド

0クリップ

投稿2019/01/23 08:21

編集2019/01/23 08:23

Railsで作っているアプリケーションで、デプロイをHerokuで行い、画像のストレージにCloudinaryを利用しようとしています。
今、エラー画面にはならないのですが、アップロードした画像があるべき場所に、代わりに画像のようなアイコンが表示されています。
イメージ説明

ソースを表示すると画像へのリンクがあり、そこを辿ると開くことができますし、Cloudinaryのアップロード画像一覧からも確認することができます。
これが表示されるようにするにはどうしたらいいでしょうか?

画像のアップローダー

class PictureUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick process resize_to_limit: [200, 200] # Choose what kind of storage to use for this uploader: if Rails.env.production? include Cloudinary::CarrierWave process :tags => ['picture'] else storage :file end def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end def extension_whitelist %w(jpg jpeg gif png) end end

画像アップロードフォーム

<div class="form-group"> <%= f.label :title, "アシスタント画像" ,class: 'font-weight-bold' %> <br> <%= image_tag @template.picture.url , :class => 'ass-pic' if @template.picture?%> <br> <span class = "picture"> <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %> </span> </div>

画像表示部分

<div class="col-md-3"> <div class="card img-thumbnail"> <%if template_u.picture?%> <%= image_tag template_u.picture.url , :class => 'ass-pic card-img-top'%> <%else%> <%= image_tag 'hoge 200X200.png', :class => 'ass-pic card-img-top'%> <%end%> <div class="card-body px-2 py-3 border-top"> <h5 class="card-title"> <%= link_to template_u.title ,template_path(template_u.id), data: {"turbolinks" => false}%> </h5> <p style="font-size:5%;">カテゴリ</p> <p style="font-size:5%;">・ <%= template_u.category.name%> </p> </div> </div> </div>

他に必要なソースがあれば添付します。

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

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

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

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

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

guest

回答1

0

自己解決

cl_image_tag(@template.picture等画像情報)
で表示できました。

※質問文はちょっと違うところを取ってきたようで画像情報の表記が揺れています。すみません

ただし、当然ですがこれはcloudinaryを保存先にしていた本番環境でしか使えませんでした。開発環境では保存先をファイルにしていたので、場合分けが必要でした。
その際は
image_tag @template.picture.url
で表示できました。こちらは末尾に.urlをつけないといけないです。これも常識なのかもしれませんが詰まったので一応残しておきます。

投稿2019/01/25 12:47

crossism

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問