Reactのプロジェクト内に保存した画像をモーダルウインドウに出力する方法を教えてください

Question

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

私はReactとOpen AI APIのCreate image edit 機能を使って、元の画像と文章をOpen AIに送って新たな画像を作成するアプリを作成しています。

現在までのコーディングでフロントエンドに作成したモーダルウインドウで元の画像を表示するところまで作成したつもりですが、その通りに表示されません。

下記の【質問の補足】で提示するコードのうち、どこを修正すれば良いでしょうか？

【質問の補足】

1. コード

App.js

import { useState } from "react";
import Modal from "./components/Modal";

const App = () => {

  const [selectedImage, setSelectedImage] = useState(null);
  const [modalOpen, setModalOpen] = useState(null);

  const uploadImage = async(e) => {
    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    setSelectedImage(e.target.files[0]);

    try {
      const options = {
        method: "POST",
        body: formData,
      }
      const response = await fetch('http://localhost:8000/upload', options);
      const data = await response.json();
      console.log(data);
    } catch(error) {
      console.error(error);
    }
  }

  return (
    <div className="app">
      <div className="upload-image">
        <span>
          <label htmlFor="files">Upload an image </label>
          <input onChange={uploadImage} id="files" accept="image/*" type="file" hidden />
          to edit.
        </span>
        {modalOpen && <div className="overlay">
          <Modal 
            setModalOpen={setModalOpen}
            setSelectedImage={setSelectedImage}
            selectedImage={selectedImage}
          />
        </div>}
      </div>
    </div>
  );
}

export default App;

Modal.js

import { useState } from "react";


const Modal = ({ setModalOpen, setSelectedImage, selectedImage}) => {

  const [error, setError] = useState(null);
  
  console.log('selectedImage', selectedImage);
  
  const closeModal = () => {
    setModalOpen(false);
    setSelectedImage(null);
  }

  return(
    <div className="modal">
      <div onClick={closeModal}>X</div>
      <div className="img-container">
        {selectedImage && <img src={URL.createObjectURL(selectedImage)} alt="uploaded image" />}
      </div>
    </div>
  );
}

export default Modal;

全体のコード

https://github.com/echizenyayota/react-dalle-create-image-edit-clone/tree/developer

2. すでに出来上がっている機能

デバイスから画像ファイルを取り込む機能

画像ファイルをプロジェクトフォルダ内にあるpublicフォルダに保存する機能

3. 質問解決によって実現させたい機能

publicフォルダに保存した画像をモーダルウインドウ（Modal.js）に表示させる

4. エラーの表示状況

フロントエンド

エラーは特に表示されていません。ただしconsole.log(‘selectedImage’, selectedImage) と記述しているにもかかわらず、何も表示されません

バックエンド（ターミナル画面）

エラーは特に表示されません。publicに保存した画像の情報が表示されます。

—

以上、ご確認よろしくお願い申し上げます

Answer 1

簡単な例を挙げます。
たとえば、public/ フォルダにある logo512.png という画像ファイルを、Appコンポーネントの中で、<img> 要素のsrc propに指定して表示させるには、

function App() {
    const { protocol, host } = window.location;
    return (
        <div>
            <img src={`${protocol}//${host}/logo512.png`} />
        </div>
    );
}

export default App;

とすれば表示されます。

追記

もっと簡単にできました。上記の2行目 const { protocol, host } = window.location; は不要で、以下でも表示されると思います。

function App() {
    return (
        <div>
            <img src="/logo512.png" />
        </div>
    );
}

export default App;

Comments

[echizeyayota]

f5qx1 さん。コメントありがとうございます。
日を改めて確認したところ、解決方法を思いつくことができました。
今後ともどうぞよろしくお願いします。

Answer 2

App.jsにsetModalOpen(true); の一文を追記することで、public に取り込んだ画像ファイルを、下記のようにモーダルウインドウとして表示させることができました。