Rails × React で画像を読み込む方法

Railsでは、画像リンクはハッシュ化されていますので直接ファイル名を記載しても開くことができません。RailsとReactの組み合わせでは下記のように読み込みを行います。

画像の読み込み方法

# アプリ名/config/webpacker.yml
# resolved_pathsを下記のように変更
resolved_paths: ["app/javascript/packs"]

アプリ名/app/javascript/packs ディレクトリに、images フォルダを追加しましょう。

表示画像は、この images フォルダの中に格納します。

画像を読み込みは下記のように行います。

# インポートの例
import MyImage from 'images/ファイル名.png'

# 利用例
const MyComponent = props => <img src={MyImage} />

これで、画像の表示が完了です。