Rails + React 画像読み込み方法

手順

1. 画像ファイルを app/assets/images へ配置
2. config/webpacker.yml に追記
3. jsx ファイルに Component を作成

1. 画像ファイルを app/assets/images へ配置

適当な画像ファイルをapp/assets/imagesへ配置します。

2. config/webpacker.yml に追記

config/webpacker.yml

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']

  # resolved_pathsを下記のように変更
  resolved_paths: ["app/assets/images"]

3. jsx ファイルに Component を作成

test.jsx

import Image from 'test.png';

export default function TestComponent(props) {
    // ImageComponent 作成
    const ImageComponent = p => <img src={Image} />
    return (
        // ImageComponent 読み込み
        <ImageComponent></ImageComponent>
    );
}

参考

• Rails × React で画像を読み込む方法
  • https://forestbook-freelance.com/2021/04/12/rails-x-react-%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95/