you can create a local file link and then display an image using this local link:

const tempFileURL = URL.createObjectURL(currentFile);

Thank you for your help.
All files that need to be displayed are stored in Firebase.
When the page is loaded or new files uploaded, request is sent to backend to get the filelink, filename, and upload time of the files stored Firebase.
The data are mix of document files and image files, how can i display them as image?

When you upload a file to Skype, images and documents are previewed.
What I want is the same as this.
I want to display the file name and upload time together.

yes, as said, you can generate this tempFileUrl and then put it inside your image tag to display it:

<Image src={tempFileURL} />

You can do the same for your existing images from your firebase: Build the correct url to the firebase file and put it inside your "src" prop.

Thank you.
how to preview pdf files?

you can use [this npm library](https://www.google.com/search?q=preview+pdf+files+npm&sca_esv=604fe53e2192f73a&sca_upv=1&rlz=1C1CHBF_deDE1109DE1109&sxsrf=ADLYWII-0rk_ZfwX8NRn3jsQakfe2dR4sA%3A1723706691218&uact=5&oq=preview+pdf+files+npm&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXByZXZpZXcgcGRmIGZpbGVzIG5wbTIFECEYoAEyBRAhGKABMgUQIRifBTIFECEYnwUyBRAhGJ8FMgUQIRifBTIFECEYnwUyBRAhGJ8FMgUQIRifBTIFECEYnwVI3gZQgANY8QVwAXgBkAEAmAFsoAHzAqoBAzMuMbgBA8gBAPgBAZgCBaACkgPCAgoQABiwAxjWBBhHwgIIEAAYgAQYywHCAgYQABgWGB7CAggQABgWGAoYHsICCBAAGBYYHhgPwgIIEAAYgAQYogTCAggQABiiBBiJBZgDAIgGAZAGCJIHAzMuMqAH7ho&sclient=gws-wiz-serp) for it

sorry, could you explain in details?

i used it but I didn't get the results I wanted.

it really depends on the library that you are using. Normally you add it to your project and apply what the docs are saying. Then it will work fine

i will try again.

@Masai Lion tried?