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

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

①前提・実現したいこと

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

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

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

③該当のソースコード

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

Javascript(React)
1import React, { useState,useEffect } from 'react';
2
3export const Option = (props) => {
4  const [val, setVal] = useState('');
5  const handleChange = e => setVal(e.target.value);
6
7  return (
8    <AppBar>
9        <label>
10          <input
11            type="radio"
12            value="../images/photo1.jpg"
13            onChange={handleChange}
14            checked={val === '../images/photo1.jpg'}
15          />
16          A
17        </label>
18        <label>
19          <input
20            type="radio"
21            value="../images/photo2.jpg"
22            onChange={handleChange}
23            checked={val === '../images/photo2.jpg'}
24          />
25          B
26        </label>
27        <img src={val} alt="composedphoto"/>
28    </AppBar>
29  );
30}
31

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

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

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

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

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

hoshi-takanori

2022/04/03 14:05

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

行動規範の内容に同意します

回答1件

ベストアンサー

イメージの場所と読み込み方が合致していません。

src配下に画像を配置する場合は、module importで読み込む必要があります。参考
images/photo1.jpgのように記述する場合は、public配下に置く必要があります。

以下コードを参考にしてください。

js
1import React, { useState } from "react";
2
3// Module Import
4import photo1 from "../images/photo1.jpg";
5import photo2 from "../images/photo2.jpg";
6const moduleImgs = [photo1, photo2];
7
8// Public Path
9const publicImgs = ["/images/publicPhoto1.jpg", "/images/publicPhoto2.jpg"];
10
11// 画像選択
12const ImgSelect = ({ src, handler, imgs }) => (
13  <div>
14    {imgs.map((image, index) => (
15      <label>
16        <input
17          type="radio"
18          value={image}
19          onChange={handler}
20          checked={src === image}
21        />
22        {index}
23      </label>
24    ))}
25    <img src={src} alt="composedphoto" />
26  </div>
27);
28
29// ページコンポーネント
30export const Option = () => {
31  const [moduleImg, setModuleImg] = useState(moduleImgs[0]);
32  const [publicImg, setPublicImg] = useState(publicImgs[0]);
33
34  const handleModuleImgChange = (e) => setModuleImg(e.target.value);
35  const handlePublicImgChange = (e) => setPublicImg(e.target.value);
36
37  return (
38    <>
39      <div>
40        Module import
41        <ImgSelect
42          src={moduleImg}
43          handler={handleModuleImgChange}
44          imgs={moduleImgs}
45        />
46      </div>
47
48      <div>
49        Public
50        <ImgSelect
51          src={publicImg}
52          handler={handlePublicImgChange}
53          imgs={publicImgs}
54        />
55      </div>
56    </>
57  );
58};