RailsとReactの組み合わせで画像ファイルを参照する方法

2021年12月14日火曜日

Rails React Ruby

t f B! P L

 

概要

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

ディレクトリ構成

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

app/assets/images/home/logo.png


javascriptソースは以下

app/javascript/components/Home.js


webpacker.ymlを修正する

/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>
)
}



自己紹介

Webエンジニアをやっています。日々思ったことや、読書レビュー、IT系の記事などを書き連ねています

広告

RailsとReactの組み合わせで画像ファイルを参照する方法

  概要 サーバサイドはRails、フロントエンドはReactを使用しているケースで、React側で画像ファイルを参照する gemはreact-railsを使用 ディレクトリ構成 画像ファイルは以下に格納。 app/assets/images/home/logo.png java...

QooQ