web-dev-qa-db-ja.com

Rails基本アプリに画像が表示されない理由

ぼくの index.html.erbコード-

<h1>Listing products</h1>

<table border="1">

<% @products.each do |product| %>
  <tr>
    <td><%= product.title %></td>
    <td><%= product.description %></td>
    <td><%= image_tag(product.image_url, :class => 'list_image') %></td>
    <td><%= product.price %></td>
    <td><%= link_to 'Show', product %></td>
    <td><%= link_to 'Edit', edit_product_path(product) %></td>
    <td><%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New Product', new_product_path %>

と画像はapp\assets\images ..しかし、静止画像がフロントエンドに表示されません。

私がFirebugしたとき、イメージタグが正しく形成されていると思います...この部分で何が欠けているかを知らせてください。

<img src="/images/product1.jpg" class="list_image" alt="Product1">

スクリーンショット-

screenshot

画像も用意されています-

image placeholder

私が何を間違っているのか、どうすれば修正できるのか教えてください。

[〜＃〜]編集[〜＃〜]

github.com/swapnesh/depot

それが私の場合うまくいかない理由を教えてください。

/images/product1.jpgTo/assets/product1.jpg機能します。

ruby-on-railsrubyruby-on-rails-3image
15
swapnesh

アセットパイプラインを使用している場合 http://guides.rubyonrails.org/asset_pipeline.html 、

画像パスは/assets/product1.jpgではなく/images/product1.jpgにする必要があります

アセットパイプラインを使用していない場合は、画像フォルダーをpublic/imagesに移動します

25
Srikanth Jeeva

アプリケーションを確認したところ、コードに問題はありません。唯一のことは、image_tagがどのように機能するかを理解することです。

通常、すべての画像、javscripts、stylesheestsをapp/assetsディレクトリに配置します。開発環境で作業する場合、これらのファイルは非圧縮で提供されますが、本番環境にデプロイする場合、アセットはプリコンパイルおよび縮小され、結果ファイルはpublic/assetsに保存されます。

資産の縮小化の背後にある考え方は、クライアントの要求をより速くし、帯域幅を節約することです。

これで、メソッドimage_tagで、画像の外部パス、画像のローカルパス、または画像の相対パスを使用できます。

あなたがするとき

<%= image_tag "http://www.mywebsite.com/image.jpg" %>

画像タグに絶対URLを使用し、最後に

<img src="http://www.mywebsite.com/image.jpg" />

次のようにローカルパスを追加することもできます

<%= image_tag "/images/image.jpg" %>

どちらで終わるか

<img src="/images/image.jpg" />

railsがファイルをプリコンパイルすると、すべてが/ public/assetsに置かれ、パスに移動することでそれらのファイルにアクセスできるため、これは実際に発生している問題です/ assets他のユーザーが説明したとおり。

だからコード

<%= image_tag "/assets/image.jpg" %>

あなたはで終わるので、実際に動作します

<img src="/assets/image.jpg" />

他にできることは、相対パスを使用することです。

<%= image_tag "image.jpg" %>

に変換されます

<img src="/assets/image.jpg" />

最後のシナリオと同じように機能します。

それにもかかわらず、アプリケーションでは、ユーザーが自分の画像をアップロードできるようにします。これは、後で本を進めるときに発生します。現実の世界のアプリでは、 Paperclip のような宝石を使用します。または carrierwave

11
rorra

Srikanthがすでに述べたように、アセットパスを参照する必要があります。例として、<%= image_tag 'Rails.png' %>コード内でFirebugをチェック（またはChrome内の要素を検査）して、結果をチェックします。

Railsを使用したアジャイルWeb開発をフォローしていることがわかるので、コードが機能しない理由はよくわかりません。デポアプリケーションを問題なく実行しました。テーブルでは、「Product1」、「Product2」、「Product3」が表示されますが、これは実際にimage_url text_field内に入力したものですか。 「Product1」を「product1.jpg」に変更するとどうなりますか？

余談ですが、Paperclipを使用する場合、呼び出しは次のようになります。

<%= image_tag(product.image.url, class: 'list_image') %>
1
Peter de Ridder

拡張子が.jpegのファイルを受け取った場合は、「。jpg」だけでファイル名を変更してみてください。

から

<%= image_tag "image.jpeg" %>

に：

<%= image_tag "image.jpg" %>
0
surgentt