Ruby on Railsの画像の保存場所(assets?public?)

プログラミングの勉強日記

2020年7月21日　Progate Lv.213
Ruby on RailsⅧ

assets配下とpublic配下

　Railsではアプリケーション内で使用される設置場所に2つの場所が存在する。それがpublicディレクトリと、app/assets/imagesディレクトリである。どちらでも画像を読み込むことができるが、どう違うのか気になったので調べてみた。

画像を読み込むパス

assets

app/assets/image配下に画像ファイルを置く場合は、パスから始める必要はなく、画像ファイル名だけでよい。

<%= image_tag "sample.jpg" %>

public

　publicディレクトリに置く場合は、パス/から始める必要がある。

<%= image_tag "/sample.jpg" %>

CSSの適応

　CSSの書き方が異なる。

assets

background: image-url("画像のパス")
background-image: image-url("画像のパス")

public

background: url("画像のパス")
background: image-url("画像のパス")
background-image: url("画像のパス")
background-image: image-url("画像のパス")

assets配下とpublic配下の違い

　assets配下に置く場合、アセットパイプラインの対象となる。アセットパイプラインはWebアプリケーションフレームワークの1つである。スペースや改行を詰める、コメントを削除するなどJavaScriptやCSSのアセットを最小化または圧縮して1つのファイルに連結することができる。また、アセットがブラウザでキャッシュされることで早くなる。

　app/assets/images ディレクトリに設置した画像は、同じ名前で画像をアップデートしても、画像ファイルの中身からフィンガープリントを自動で更新して、画像ファイル名に挿入するので、ブラウザでキャッシュされた古い画像が表示される心配がない。(/config/environments/のファイルに下記の記述を追記する場合)

config.assets.digest = true

　同じアプリケーション内で JavaScript を利用しており、JavaScript 内で画像を使う場合ｈpublic配下に置く。
　

参考文献

https://techblog.kyamanak.com/entry/2017/10/13/003818
https://kurose.me/rails-image-assets-public/
https://www.transnet.ne.jp/2016/02/28/rails%E5%88%9D%E5%AD%A6%E8%80%85%E3%81%8C%E3%81%A4%E3%81%BE%E3%81%9A%E3%81%8Dcolnr%E3%80%8C%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/