Where to store images in a React application

# 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.

Copied!
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.

Copied!
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 will 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.

Copied!
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.

Copied!
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.

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

I've also written a detailed guide on how to import and use images in React.

# Place images that you don't import 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 into any of your components.

Copied!
public/
  favicons/
    favicon-16x16.png
    favicon-32x32.png
    android-chrome-192x192.png
    apple-touch-icon.png
  index.html

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 tag to "/images/thumbnail.webp".

Copied!
export default function App() {
  return (
    <div>
      {/* 👇️ Local image */}
      <img src="/images/thumbnail.webp" alt="horse" />
    </div>
  );
}

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

# Conclusion

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Display an image from a URL or Local Path in React
• How to Use an Image as a Link in React.js
• Setting a background image with inline Styles in React
• Set an onClick listener on an Image in React
• How to change the favicon in React.js
• Error with Permissions-Policy header: Unrecognized feature
• React: Namespace tags are not supported by default