RailsとReactの組み合わせで画像ファイルを参照する方法-エンジニアtonブログ

概要

サーバサイドはRails、フロントエンドはReactを使用しているケースで、React側で画像ファイルを参照する

gemはreact-railsを使用

画像ファイルは以下に格納。

app/assets/images/home/logo.png

javascriptソースは以下

app/javascript/components/Home.js

/config/webpacker.ymlに以下を追記する

default: &default
・・・
  resolved_paths: ['app/assets'] # ここを追記
  additional_paths: []
・・・

import Logo from "images/home/logo.png"
function Home(props) {
  return(
    <img src={Logo}></img>
  )
}