ラジオボタンで選んだ項目によって表示される画像が変化するような実装をしたい

Question

Reactを用いて開発をしております。勉強不足で恐縮ですが以下内容で質問させてください。

①前提・実現したいこと

ラジオボタンで選んだ項目によって表示される画像が変化するようにコンポーネントを組みたいです。

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

ラジオボタンの選択は問題なく実装できているようなのですが、肝心の画像表示がされません。（画像が格納されていることとパスが正しいことは確認済みです）

③該当のソースコード

・create-react-appで作成したものになります。
・画像は以下のようなフォルダ構成でphoto1.jpg、photo2.jpgとして配置しております。
（以下のコードはOption.jsxに記載してあるコードとなります）

import React, { useState,useEffect } from 'react';

export const Option = (props) => {
  const [val, setVal] = useState('');
  const handleChange = e => setVal(e.target.value);

  return (
    <AppBar>
        <label>
          <input
            type="radio"
            value="../images/photo1.jpg"
            onChange={handleChange}
            checked={val === '../images/photo1.jpg'}
          />
          A
        </label>
        <label>
          <input
            type="radio"
            value="../images/photo2.jpg"
            onChange={handleChange}
            checked={val === '../images/photo2.jpg'}
          />
          B
        </label>
        <img src={val} alt="composedphoto"/>
    </AppBar>
  );
}

④自分で調べたことや試したこと

stateでラジオボタンのvalueを上書きし、それをもとにimgタグのsrcを変化させれば良いと考え、上記コードを試しましたが、うまく動作しません。（検証で調べてみるとsrcには正しくパスが表示されているのですが、画像を読み込めません）

⑤使っているツールのバージョンなど補足情報

reactはver.17を使用しています。

どこかに抜け漏れがあると思うのですが、ご教示いただけますとありがたいです。よろしくお願いいたします。

Comments

[hoshi-takanori]

create-react-app で作ったプロジェクトでしょうか？ また、画像はどこに置いてますか？