Reactjs and Images in Public Folder

Importing images from public folder in react

change the src from /public/images to /images

ReactJS: How to upload images from front-end to public folder

I have come up with a solution. I have found a tutorial that uses NodeJS to upload the file. The file just needs to be sent through an endpoint and on the NodeJS server deal with it like this.'/upload', (req, res) => {
if (req.files === null) {
return res.status(400).json({ msg: 'No file uploaded' });

const file = req.files.file;`${__dirname}/client/public/uploads/${}`, err => {
if (err) {
return res.status(500).send(err);

res.json({ fileName:, filePath: `/uploads/${}` });

This server uploads the image file to public/uploads folder of the ReactJS client. Then in the response returns the file name and file path.

Image in public folder not loading after deployment

If you're using create-react-app it could be caused by the homepage value in your package.json being different than before you deployed:

"homepage": ""

If that's the case, this will change the default react directory to /yourProjectName.

So in your jsx you would need to add /yourProjectName by calling the following path instead:

<img src="./yourProjectName/imageName.png" />

More information about relative paths in the docs here.

Note: You could then create an environment variable and call that instead for better reusability.

How to import image into React from public folder through a json file

Seems like you forget one level


in JSON. Code of IMG in component should looks like this:

<img src={data.images.url} alt={} />

Related Topics

Leave a reply