
こちらの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 コメント