React.jsにおけるimgタグのsrc属性の記述方法について

Question

###質問概要
jsxのimgタグのsrc属性に関する質問です。
今、ディレクトリの構造が下記のようになっているとします。

root/
├ images/
│ └ sample.png
├ public/
│ ├ bundle.js
│ └ index.html
├ src/
│ ├ components/
│ │ └ Header.jsx
│ └ index.jsx
├ package.json
└ webpack.config.js

Header.jsxの<img>のsrc属性値としてimages/sample.pngを読み込ませようと思い、方法①と方法②を試しました。

###方法①
方法①ではHeader.jsxを下記のようにしました。

import React from 'react';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src="../images/sample.png"
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

しかし、画像は表示されず、コンソールにはnot foundと表示されてしまいます。
（ちなみに、webpackによってトランスパイルされpublic/bundle.jsとして出力されます。）

###方法②
そこで、方法②ではurl-loaderをインストールし、webpack.config.jsに下記を追加し、Header.jsxも以下のように書き換えました。

{
   test: /.png$/,
   loader: 'url-loader?mimetype=image/png',
}

import React from 'react';

import imgUrl from '../../images/sample.png';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src={imgUrl}
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

上記のようにすると、うまく画像が表示されます。

###質問まとめ
方法①で画像が表示されない原因は何なのでしょうか？
（できるだけ方法①を採用したいと考えています。）
何かご回答をいただけると非常に助かります。

Answer 1

指定している階層が違うからではないのですか？
① src="../images/sample.png"
② '../../images/sample.png'

①をsrc="../../images/sample.png"
にしてもダメなのでしょうか。

Comments

[tarotarosu]

回答ありがとうございます<(_ _)>
`src="../../images/sample.png"`
としてもダメでした...
なぜなんだ...

Answer 2

自己解決しました。
結論から言うと、完全に私の設定ミスでした...
webpack.config.jsでwebpack-dev-serverの設定を下記のように記述していました。

devServer: {
  historyApiFallback: true,
  contentBase: path.join(__dirname, '/public'),
},

上記のようにするとpublic/内にそもそもimages/が存在していないため、結果もnot foundになってしまったようです。
いろいろと見落としていました...
ご回答してくださった方々、ありがとうございました<(_ _)>

Comments

[yuki-saito]

解決してよかったです。