概要
Railsで画像ファイルを配置するのは以下の2箇所
- app/assets/images
- 開発側で準備するロゴやアイコンなど
- public
- ユーザーのアップロード画像など
それぞれの下にディレクトリーを作って、その中の画像ファイルをimg要素、div要素の背景画像で読み込む場合のパス指定について整理した。
ビューファイル&img要素の場合
app/assets/images
サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。
|
1 |
<img src="パス"> |
example/ファイル |
読み込めない |
/example/ファイル |
読み込めない |
./example/ファイル |
読み込めない |
public
サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。
|
1 2 3 |
<img src='example/image_public.jpg'> <img src='/example/image_public.jpg'> <img src='./example/image_public.jpg'> |
example/ファイル |
読み込める |
/example/ファイル |
読み込める |
./example/ファイル |
読み込める |
ビューファイル&img_tagの場合
app/assets/images
サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。
|
1 |
<%= image_tag 'example/image_assets.jpg' %> |
example/ファイル |
読み込める |
/example/ファイル |
読み込めない |
./example/ファイル |
NoMethodError |
public
サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。
|
1 |
<%= image_tag '/example/image_public.jpg' %> |
example/ファイル |
Sprockets::Rails::Helper::AssetNotFound |
/example/ファイル |
読み込める |
./example/ファイル |
NoMethodError |
SCSS&div要素の背景画像の場合
app/assets/images
サブディレクトリ―exampleの下にimage_assets.jpgを置いた場合。
|
1 |
background-image: image-url('example/image_assets.jpg'); |
example/ファイル |
読み込める |
/example/ファイル |
読み込めない |
./example/ファイル |
読み込めない |
public
サブディレクトリ―exampleの下にimage_public.jpgを置いた場合。
|
1 |
background-image: url('/example/image_public.jpg'); |
example/ファイル |
読み込めない |
/example/ファイル |
読み込める |
./example/ファイル |
読み込めない |
まとめ
img要素はpublicの画像は読めるがassetsの画像は読めないので、img_tagヘルパーを使う方がよい。画像をimg_tagで配置する場合も、div要素の背景画像とする場合も、ファイルのパス指定は以下の通り。
| パス指定 | |
app/assets/images |
サブディレクトリ―/ファイル |
public |
/サブディレクトリ―/ファイル |
参考
確認に使ったアプリケーションファイル
pages_controller.rb
|
1 2 3 4 |
class PagesController < ApplicationController def image_location end end |
image_location.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<h1>image_location</h1> <h2>img</h2> <h3>app/assets/image/example</h3> <div class="image_wrapper"> <img src='example/image_assets.jpg'> <!-- "example/image_public.jpg" "/example/image_public.jpg" "./example/image_public.jpg" 全て読み込めない --> </div> <h3>public/example</h3> <div class="image_wrapper"> <img src='example/image_public.jpg'> <!-- "example/image_public.jpg" "/example/image_public.jpg" "./example/image_public.jpg" 全て読み込める --> </div> <h2>img_tag</h2> <h3>app/assets/image/example</h3> <div class="image_wrapper"> <%= image_tag 'example/image_assets.jpg' %> <!-- 'example/image_assets.jpg'は読み込める '/example/image_assets.jpg'は画像を読み込めない './example/image_assets.jpg'はNoMethodError --> </div> <h3>public/example</h3> <div class="image_wrapper"> <%= image_tag '/example/image_public.jpg' %> <!-- "example/image_public.jpg"はSprockets::Rails::Helper::AssetNotFound "/example/image_public.jpg"は読み込める "./example/image_public.jpg"はNoMethodError --> </div> <h2>SCSS</h2> <h3>app/assets/image/example</h3> <div class="image_div_assets"></div> <h3>public/example</h3> <div class="image_div_public"></div> |
pages.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .image_wrapper { width: 600px; height: 400px; text-align: center; background-color: #ccc; } .image_div_assets { background-image: image-url('example/image_assets.jpg'); // 'example/image_assets.jpg'は読み込める // '/example/image_assets.jpg'は読み込めない // './example/image_assets.jpg'は読み込めない background-repeat: no-repeat; background-size: contain; background-position: center center; width: 600px; height: 400px; background-color: #ccc; } .image_div_public { background-image: url('/example/image_public.jpg'); // 'example/image_public.jpg'は読み込めない // '/example/image_public.jpg'は読み込める // './example/image_public.jpg'は読み込ない background-repeat: no-repeat; background-size: contain; background-position: center center; width: 600px; height: 400px; background-color: #ccc; } |