Sometimes, we want to add images in public folder with React.

In this article, we’ll look at how to add images in public folder with React.

How to add images in public folder with React?

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.

For instance, we write

<img src={process.env.PUBLIC_URL + "/img/logo.png"} />;

to add the img element with the src attribute of the image set to process.env.PUBLIC_URL + "/img/logo.png" to load the image from the /img/logo.png file in the public folder.

We use process.env.PUBLIC_URL to get the path to the public folder.

Conclusion

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.