【Webpack】Reactでimgのsrcで画像が読み込まれない時【file-loaderの使い方】

Reactでimgタグでsrcで画像を読み込みたい時file-loaderを使いました。
その時の備忘録です。

file-loaderをインストール
yarn add file-loader@1.1.11

https://www.npmjs.com/package/file-loader

webpack.config.jsに以下追加(公式参照)

{
           test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                }  
              }
            ]
}

import Img from ‘path/to/image.png’;

<img src={Img} />

んでテストサーバーを立ち上げている場合は一度停止して再び立ち上げる
表示されるけど画像のURLがキモい

以下で解決

{
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                    //ここ追加
                    name: '[path][name].[ext]'
                }  
              }
            ]
}

もっかいテストサーバーを再起動

こんなかんじ

以上です
React使い慣れてないので色々作りながら慣れていこう、、、