
2021-01-17
Rails6から標準導入されたWebpackerは、JavaScriptやCSSだけでなく画像ファイルの管理も行えます。
今回はWebpackerで画像ファイルを管理し、CSSやビューから参照する方法を解説します。
Webpackerで画像ファイルを管理するには、Webpackerのデフォルトソースパス(app/javascript/
)配下にimages
ディレクトリを新規作成し、その中に画像ファイルを配置します(ディレクトリ名は任意)。
また、ディレクトリは多重階層(app/javascript/images/works/
)にしても問題ありません。
Webpackerに画像ファイルをインポートするには、app/javascript/packs/application.js
に以下を追記します。
const images = require.context('../images', true)
const imagePath = (name) => images(name, true)
Rails6であれば最初から記述されているかと思います。ただしコメントアウトされているので外しておきましょう。
CSSから画像ファイルを参照するには、以下のように記述します。
.jumbotron {
background-image: url("../images/cover.jpg");
}
CSSファイルのあるディレクトリから相対パスで指定します。
Sprockets管理下の画像ファイル(app/assets/images/
)を参照するときはimage-url
を使う必要がありましたが、Webpacker管理下の画像ファイルの場合は通常のurl
が使えます。
ビューから画像ファイルを参照するには、以下のように記述します。
<%= image_pack_tag 'media/images/cover.jpg' %>
画像ファイルのURLを指定して参照することも可能です。
<img src="<%= asset_pack_path 'media/images/works/cover.jpg' %>">
Webpacker管理下の画像ファイルを参照しようとすると、以下のエラーが表示される場合があります。
Webpacker::Manifest::MissingEntryError in Statics#index
Showing /path/to/project/app/views/statics/index.html.erb where line #4 raised:
Webpacker can't find media/images/cover.jpg in /path/to/project/public/packs/manifest.json.
このエラーは、配置した画像ファイルがWebpackerに認識されていないために表示されます。
画像ファイルを配置した後は、以下のコマンドを実行してWebpackのビルドを行いましょう。
$ bin/webpack
坂井 光太郎 (Kotaro Sakai)
東京都世田谷区在住のフリーランスエンジニア。Ruby on Rails を中心とした Web アプリ開発全般に関する技術情報をまとめています。業務に関するご依頼・ご相談、当サイトに対するご感想やメッセージはコンタクトフォームからお気軽にお問い合わせください。