Rails – 画像ファイルの配置とパス指定

概要

Railsで画像ファイルを配置するのは以下の2箇所

app/assets/images
開発側で準備するロゴやアイコンなど
public
ユーザーのアップロード画像など

それぞれの下にディレクトリーを作って、その中の画像ファイルをimg要素、div要素の背景画像で読み込む場合のパス指定について整理した。

ビューファイル&img要素の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

example/ファイル 読み込めない
/example/ファイル 読み込めない
./example/ファイル 読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

example/ファイル 読み込める
/example/ファイル 読み込める
./example/ファイル 読み込める

ビューファイル&img_tagの場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

example/ファイル 読み込める
/example/ファイル 読み込めない
./example/ファイル NoMethodError

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

example/ファイル Sprockets::Rails::Helper::AssetNotFound
/example/ファイル 読み込める
./example/ファイル NoMethodError

SCSS&div要素の背景画像の場合

app/assets/images

サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。

example/ファイル 読み込める
/example/ファイル 読み込めない
./example/ファイル 読み込めない

public

サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。

example/ファイル 読み込めない
/example/ファイル 読み込める
./example/ファイル 読み込めない

まとめ

img要素はpublicの画像は読めるがassetsの画像は読めないので、img_tagヘルパーを使う方がよい。画像をimg_tagで配置する場合も、div要素の背景画像とする場合も、ファイルのパス指定は以下の通り。

パス指定
app/assets/images サブディレクトリ―/ファイル
public /サブディレクトリ―/ファイル

参考

確認に使ったアプリケーションファイル

pages_controller.rb

image_location.html.erb

pages.scss

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です