Take Image From User and Store in List, Then Retrieve From List SPFX

The SharePoint Framework (SPFx) is a development model for building SharePoint solutions that focuses on client-side development using modern web technologies such as React, TypeScript, and Node.js. In order to interact with SharePoint from a client-side solution, developers typically use SharePoint's REST API or a library that simplifies the process of working with the API. One such library is the PnP JS library, which is a collection of JavaScript functions and helpers that make it easier to interact with SharePoint from client-side solutions. The library provides a number of helper functions for common tasks, such as working with lists and libraries, managing site permissions, and working with user profiles. To use the PnP JS library, you must first authenticate with SharePoint. There are several ways to authenticate with SharePoint, including using OAuth or Azure Active Directory. The specific method you use will depend on the requirements of your solution and the resources available to you.

Once you've authenticated with SharePoint, you can use the PnP JS library to interact with SharePoint lists. In the code snippets provided in the previous answer, we're using the library to add an image to a SharePoint list and then retrieve that image and display it to the user.

Part 2 
And below is the code to retrieve the image from the SharePoint list and display it to the user:

import { sp } from "@pnp/sp";

// Get the image element from the DOM
const image = document.querySelector("#image");

// Retrieve the image from the SharePoint list
const list = sp.web.lists.getByTitle("ImageList");
const items = await list.items.select("Image").get();
const item = items[0];

// Set the source of the image element to the URL of the image
image.src = item.Image.Url;

Part 1
First create a SharePoint list with a column of type 'Image' to store the images. Next use the PnP JS library to upload the image to the SharePoint list. and then use the PnP JS library to retrieve the image from the SharePoint list and display it to the user. See the code to upload an image on sharepoint list:

import { sp } from "@pnp/sp";

// Get the file input element from the DOM
const fileInput = document.querySelector("#file-input");

// Add an event listener to the file input element to get the file object
fileInput.addEventListener("change", async () => {
  // Get the file object
  const file = fileInput.files[0];

  // Upload the file to the SharePoint list
  const list = sp.web.lists.getByTitle("ImageList");
  const item = await list.items.add({
    Title: file.name,
    Image: {
      Name: file.name,
      ContentStream: file,
    },
  });
});