[React]imgタグの画像が読み込めない

Question

前提・実現したいこと

同じ階層にある画像ディレクトリの画像を読み込みたいのですが、以下のようにうまく表示できません.
imgに画像があり、名前の間違いがないことは確認済みです。
わかる方がいましたらコメントお願いします。

発生している問題・エラーメッセージ

###ディレクトリ構成
-components
*|-Molecules
**|-Piyo.jsx
**|-img

該当のソースコード

import React from "react";
import styles from "./Piyo.css";

export default function Piyo() {
  return (
    <div className={styles.a}>
      <img
        src="img/sample.png"
        srcSet="img/[e-mail] 2x"
        className={styles.b}
        alt="description"
      />
    </div>
  );
}

Answer 1

imgのパスは問題ないでしょうか。相対パスは、実際のフォルダ位置ではなく、HTMLのURLが基準となります。

Comments

[aiai8976]

実際のフォルダ位置でやっていると思います。HTMLのURLというのはどーゆうことでしょうか。

[maisumakun]

どんなURLでそのページにアクセスしますか？

[aiai8976]

localhost:3000ですね

[maisumakun]

localhost:3000/で間違いないですか？（ホスト名でなく、パスのほうが重要な場面です）

[aiai8976]

はいそれです。

[aiai8976]

上記のcomponentと同じ階層にあるファイルがlocalhost:3000/とした場合にはimgのパスはどのようにすればいいでしょうか？

[maisumakun]

「ブラウザから見て」imgにアクセスするためのURLパスはどうなっていますか？

[aiai8976]

ルーティングでは数個のファイルのみ対応付けていて、imgのパスはわかりません。
imgのブラウザから見たパスはどのように確認できるのでしょうか？

[maisumakun]

サーバをどのように用意しているかわからないと、なんとも言えません。

[aiai8976]

create-react-appで環境構築を行いました。
npm startでローカルサーバが立ち上がります。