Where to store images in a React application?

This article will tell you where to store images in a React application and some ways to store images, like in the src folder, public, or on an external server. Let’s go into detail now.

Store images in a React application

If you’re coding an app that uses React or any other frameworks, you’ll have to store images for web using.

An image file extension is a collection of images named and stored in computer memory as one or more character strings. However, each image is saved as a file with a different format, depending on the purpose of the image file extension is selected accordingly.

Each operating system will specify the file extension differently. Another cannot use the files of one operating system. Some extensions are defined as images such as jpg, png, gif, bmp, and tiff, …

Store in the src folder

The raw code before minification, concatenation, or some other compilation is stored in the src folder, which is used for reading and editing code. The program creates this folder when you use the command to create a new project. In it, we will keep all the files needed to build the website, like images, mp4, fonts, and so on.

Inside this existing src folder, we’ll create an assets folder and add an images folder to keep our images more organized. We can easily access the image file src/assets/images.

Store in the public folder

Or you can also use the way to store images in the public folder, and this is also the part created when you initialize the react project with the command.

However, what is stored in this folder is public; even users can access it to view the files inside, so there is a bit of a security risk here. We do not recommend this method.

Store in an external server

Remote access is required to the external user management server, which is not located on the LAN. Thanks to the remote access server, users can access the LAN’s print services and files from a distance.

You will access these image files through a url that is stored and returned by the server for us to use.

For example, you can google images and look up any image, right-click on the image and copy the address of the image. So you have got the url of the image stored on google’s server. It will help if you put this url in the image tag’s src to get the image in network conditions.

Summary

The article has told you where to store images in a React application. In my opinion, you should use an external server to reduce the size of the app. Let’s try it. Good lucks for you!

Maybe you are interested:

• Import and use an Image in a React component
• Display an image from a URL / local path in React
• Setting a background image with inline styles in react