Where to store images in a React application

avatar

Borislav Hadzhiev

Last updated: May 3, 2022

banner

Photo from Unsplash

Where to store images in a React application #

You should store images close to where they are used in your React application. For example, if you have a Contacts.js component that uses a contact.png image, store the image right next to the Contacts.js file.

On the other hand, images that you do not import in your components, e.g. favicons should be stored in the public directory.

Assume we have the following folder structure.

shell
src/ pages/ contacts/ Contacts.js index.js contacts.webp

Notice that the contacts.webp image is placed right next to the Contacts.js file that uses it.

src/pages/contacts/Contacts.js
import ContactsIcon from './contacts.webp'; export function Contacts() { return ( <div> <h2>Contacts</h2> <img src={ContactsIcon} alt="contacts" /> </div> ); }

Colocating images close to where they are used has multiple advantages:

  • If we remove the img tag from the component, we know we can safely delete the image because it's not used anywhere else in our app
  • Simple import statements - all of the files that interact with one another are close to each other, so we can import from the same directory
  • If the image gets removed by mistake, we would get a build time error because the import statement would fail, rather than having broken images without knowing (referenced from the public/ directory).

If the contacts.webp image is also used in another component I would move the image in a separate directory.

shell
src/ pages/ contacts/ Contacts.js index.js about/ About.js index.js images/ contacts.webp

Now I would import the image from the images/contacts.webp in both Contacts.js and About.js.

src/pages/contacts/Contacts.js
import ContactsIcon from '../../images/contacts.webp'; export function Contacts() { return ( <div> <h2>Contacts</h2> <img src={ContactsIcon} alt="contacts" /> </div> ); }

If I end up removing the <img /> tag that references the image from one of the components, then I'd move the image right next to the only component that uses it.

An easy way to check if the image is used in any of your components is toCTRL + Shift + F in your IDE and look for contacts.webp.

Your IDE should be able to show you all references of contacts.webp in your project.

Any of the images that you do not import directly in your components should be placed in the public/ folder.

You could create an images/ or favicons/ directory in your public/ folder where you store your favicons, site logos or any other kind of images that you aren't going to import in any of your components.

shell
public/ favicons/ favicon-16x16.png favicon-32x32.png android-chrome-192x192.png apple-touch-icon.png index.html
Make sure to update the path that points to your favicons in your index.html file if you have to.

You should avoid using images from the public/ directory in your React components because they are used without being imported.

For example, if you have an image located at public/images/thumbnail.webp, you would set the src of the img to "/images/thumbnail.webp".

App.js
export default function App() { return ( <div> {/* 👇️ local image */} <img src="/images/thumbnail.webp" alt="horse" /> </div> ); }
If those images end up being moved or removed, you would have broken images in your React app without knowing.

On the other hand, if you explicitly import an image you would get an error at build time if the import statement fails.

In short:

  • Any images that you import in your React components should be stored close to where they are used (preferably in the same directory).
  • Any images that you do not import in your React components (e.g. favicons) should be stored in your public/ directory, e.g. under a favicons/ folder.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.