React+Laravelでpublicフォルダ内の画像を表示する

はじめに

React+Laravelでwebサイトを書くぞー！っとなってとりあえずコンポーネントを作ることにしたのですが、そもそもReact初体験で、Reactで画像ってどうやって表示するのかわからなかったのでメモ。

環境

• docker
• Laravel Framework 6.16.0
• npm 6.12.1

ディレクトリ構成

├── docker
│   ├── nginx/
│   └── php/
├── docker-compose.yml
└── laravel
    ├──app/  
    ├──artisan  
    ├──bootstrap/  
    ├──composer.json  
    ├──composer.lock  
    ├──config/  
    ├──database/  
    ├──node_modules/
    ├──package.json  
    ├──phpunit.xml  
    ├──public/
    │   ├──img/
    │       ├──hoge.png
    ├──resources/  
    │   ├──js/
    │       ├──app.js
    │       ├──components
    │       │   ├──Example.js
    ├──routes/  
    ├──server.php  
    ├──storage/  
    ├──tests 
    ├──vendor

今回はExample.js内にhoge.pngのパスを記述して表示します。

調べたら出てきた通りにしてみた。

なんかReactにはpublicディレクトリを参照する環境変数があるみたい。そのままやっちゃえ。

Example.js

<img src={`${process.env.PUBLIC_URL}/img/hoge.png`} alt="" />;

なんかエラーが出てる。

http://localhost/$%7Bprocess.env.PUBLIC_URL%7D/img/hoge.png 404 (Not Found)

undefinedじゃん。Laravelのpublicディレクトリは参照できないじゃん！(それはそう)

解決策

そのままpublicより下のパスを書いたら表示された。思ってたより簡単だった。

Example.js

<img src={'/img/hoge.png'} alt="" />;

難しく考えなくてよかったね。

おまけ

コンポーネントをビルドするのに詰まったのでメモ。
あとはwebpack.mix.jsでビルドしてもらうだけ。ここではresources/js/app.js をビルドしているので、このコードに先ほどのコンポーネントを読み込んであげる。

app.js

require('./components/Example');

これで先ほどのExampleがLaravelで読み込まれる！