Select a local image to display in the frontend

[haha4ni]

I want to use an OpenFileDialog to select a local file and display the chosen image in the frontend using <img src={imageSrc}>. However, since absolute file paths cannot be directly used in the frontend for security reasons, I load the image in the backend, convert it to Base64, and then return it to the frontend.

Here's how I handle it:

const base64Image = await GetImageBase64(filePath);
setImageSrc(`data:image/jpeg;base64,${base64Image}`);

This method works, but I wonder if there is a more standard or efficient approach to selecting and displaying an image in the frontend. Are there any best practices or alternative methods that are commonly used?

My goal is to scan an entire folder and display all the images on the screen.