参照先のパス指定方法をご教授お願いします(React)

こちらのReactのコードについて質問です。
※内容は画像のパス指定についてのみですが、一応ある程度コードを記載します。

子コンポーネント(EventError.js)
const EventError = ( { src, alt } ) => {
const [path, setPath] = useState(src);
// 画像を読み込めない場合は、エラー画像を表じ
const handleError = () => setPath('./image/noimage.jpg')

return (
<img src={path} alt={alt} onError={handleError} />
);
}

export default EventError

親コンポーネント(index.js)
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<EventError src="./image/wings.jpg" alt="サンプル画像" />
);

画像フォルダの配置とコードがあるファイルの位置をそれぞれ記載致します。

・「EventError.js」位置
my-react¥src¥chap03EventError.js
・「index.js」位置
my-react¥src¥index.js
・index.html位置(「root」idがあるファイル)
my-react¥public¥index.html
・画像の位置
my-react¥public¥image
・補足 下記にも同名の「image」フォルダあります。(中身は無関係の画像ですが)
my-react¥src¥image

場所とソースコードを照らし合わせると、「index.html」の位置から場所を参照しているような気がします。

質問①Reactではコンポーネントから場所を参照したとしても「root」idがある位置(index.html)から参照するんでしょうか?
質問②この配置関係の「index.html」の呼び名があれば教えてください。
(親コンポーネントが「document.getElementById」で取得している先)
(関係的には最上位に値するかと思います。)

知識が浅く内容が伝わりにくいかと思いますが、ご回答頂けると嬉しいです。
ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント