ReactJS and images in public folder

Question

Im new in ReactJS and I want to import images in a component. These images are inside of the public folder and I do not know how to access the folder from the react component.

Any ideas ?

EDIT

I want to import an image inside Bottom.js or Header.js

The structure folder is:

I do not use webpack. Should I ?

Edit 2

I want to use webpack for loading the images and the rest of assets. So in my config folder I have the next files:

Where I need to add the paths of the images and how?

Thanks

this folder is public to what? what is your project structure? Are you bundling images with webpack as well or is this excluded? etc etc etc context context — Joel Harkes, Nov 09 '17 at 08:08
seems like it is not packed. have you tried: `src="/images/logofooter.png"`? — Joel Harkes, Nov 09 '17 at 08:17
Sorry this isn't relevant to the question but what icon theme do you use? — Nermin, Aug 12 '20 at 06:38
Try creating a folder within src, store your assets in it, and import it using relative path. This is better for a number of reasons. Just a suggestion! — Aditya Patnaik, Nov 25 '20 at 16:33

Bimal Grg · Answer 1 · 2022-08-17T13:34:53.320

400

You don't need any webpack configuration for this.

In your component just give image path. React will know its in public directory.

<img src="/image.jpg" alt="image" />

edited Aug 17 '22 at 13:34

answered Feb 11 '18 at 09:54

Bimal Grg

7,624
2
24
21

6

This worked for me. Only I copied images to public directory.React automatically resolved the path. – Vineeth Bhaskaran Mar 23 '19 at 12:32
1

this is the best method because process.env.PUBLIC_URL is relative route and will work wrong for nested routes. Best is to use absolute route starting with slash as specified in the answer... – Baraja Swargiary Dec 17 '20 at 04:19
2

Worked for me too. Such a simple solution, reminds me of the good old days. – Deshen Apr 11 '21 at 12:13
1

What if you want to get a reference from a scss file like this background-image:url(...); ? – Daniel Tkach Jun 04 '21 at 22:43
Is there any circumstance when React stops knowing that? I started getting "Cannot find module" just out of the blue. The `process.env.PUBLIC_URL` thing worked, but it was just not needed a while ago – 101is5 Nov 24 '22 at 22:02

score 194 · Accepted Answer · answered Feb 23 '19 at 18:13

194

To reference images in public there are two ways I know how to do it straight forward. One is like above from Homam Bahrani.

using

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

And since this works you really don't need anything else but, this also works...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

answered Feb 23 '19 at 18:13

Gerard

2,200
1
9
6

6

It's not showing any error in the console but the image is appearing as a default image icon not what I have imported. I have tried both the cases you have mentioned. Please help me out. Thanks ! – Prakhar Mittal Mar 17 '19 at 22:58
Is there any way of tweaking this feature? My project was normally detecting image files like the answer above, by solely providing the image name and extension. Then overnight the only way I could render images was through this method. I feel like I've turned something off by accident. Not sure if it's relevant but I've made a deployment to gh-pages, and then this happened – 101is5 Nov 24 '22 at 22:07

score 35 · Answer 3 · answered Dec 23 '18 at 20:30

35

the react docs explain this nicely in the documentation, you have to use process.env.PUBLIC_URL with images placed in the public folder. See here for more info

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

answered Dec 23 '18 at 20:30

Hom Bahrani

3,022
27
25

Yes, for dynamic images outside the src dir hierarchy. Static ones, like a logo or a background, can be reached with the import method. – Juan Lanus Feb 02 '19 at 21:39
2

also, this is for apps built with create react app – eballeste Feb 04 '19 at 17:34
2

It's not showing any error in the console but the image is appearing as a default image icon not what I have imported. Please help me out. – Prakhar Mittal Mar 17 '19 at 22:59

score 8 · Answer 4 · answered Jun 09 '18 at 20:04

1- It's good if you use webpack for configurations but you can simply use image path and react will find out that that it's in public directory.

<img src="/image.jpg">

2- If you want to use webpack which is a standard practice in React. You can use these rules in your webpack.config.dev.js file.

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

then you can import image file in react components and use it.

import image from '../../public/images/logofooter.png'

<img src={image}/>

Vikram Singh Shekhawat · Answer 5 · 2021-07-27T08:38:15.623

5

Create a folder in public ex.Assets and put your image in that folder and assign the folder_name / image_name in src

<img src = "/Assets/cardimg.svg" alt="Card image cap" width="400" />

edited Jul 27 '21 at 08:38

answered Jul 27 '21 at 08:22

Vikram Singh Shekhawat

55
1
2

score 5 · Answer 6 · answered Jan 15 '22 at 11:10

5

Simply Use

<img src='/image.extension' />

React will automatically point toward the public directory

answered Jan 15 '22 at 11:10

Sandeep Rana

179
2
6

score 4 · Answer 7 · edited Jan 24 '19 at 16:31

4

We know React is SPA. Everything is rendered from the root component by expanding to appropriate HTML from JSX.

So it does not matter where you want to use the images. Best practice is to use an absolute path (with reference to public). Do not worry about relative paths.

In your case, this should work everywhere:

"./images/logofooter.png"

edited Jan 24 '19 at 16:31

Lauren Rutledge

1,195
5
18
27

answered Apr 30 '18 at 19:10

Karthik Sagar

424
4
7

Umesh · Answer 8 · 2017-11-09T08:27:44.773

3

You should use webpack here to make your life easier. Add below rule in your config:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

After this, you can simply import the images into your react components:

import myImage from 'publicfolder/images/Image1.png'

Use myImage like below:

<div><img src={myImage}/></div>

or if the image is imported into local state of component

<div><img src={this.state.myImage}/></div>

edited Nov 09 '17 at 08:27

answered Nov 09 '17 at 08:23

Umesh

2,704
19
21

I doubt if you need webpack to be able to do an import of a resource. – Siya Mzam Nov 09 '17 at 08:25
@fshock, I said it will make it easier to accomplish the task. – Umesh Nov 09 '17 at 08:28
@Umesh I prefer to do it with Webpack. So you said that I have to add the rule in the config but which file ? I have path.js, polyfills.js, webpack.config.dev.js , webpack.config.prod.js and webpackDevServer.config.js. I'm going to edit the question so all of you can see the structure. Thanks – Aceconhielo Nov 09 '17 at 08:33
@Aceconhielo, you should include it in webpack.config.dev.js and webpack.config.prod.js – Umesh Nov 10 '17 at 01:17

score 3 · Answer 9 · answered Mar 17 '21 at 18:38

here is sure and three simple way to do that...

you can make one folder in directory and access it as we do import way or

you can give direct image name in src

<img src="image__name" alt="yourpic" />

//by default react look in public folder can render image in img tag

const image = window.location.origin + "/image.png";

// if your image in public directory inside folder imagecollection than you can import it in this way

  const image = window.location.origin + "/imagecollection /image.png";
 <img src={image} alt="yourpic" />

score 1 · Answer 10 · answered Mar 10 '21 at 06:42

Try This One its easy and Simple

Don't Make Image folder in src.
Make an image folder in public.
you work in react-bootstrap install

npm install react-bootstrap

import React from 'react';
  
import 'bootstrap/dist/css/bootstrap.min.css';
import { Image } from 'react-bootstrap';
export default function Main() {
   
   return (
     <>
          <Image src="/img/image.jpg/100px250" alt="bg image"  fluid />
     </>
    )
 }

Hope it's Done

twinklecube · Answer 11 · 2023-04-10T20:18:50.580

This is quite an old question. But anyone who needs a solution, please read.

If you are creating a react app from the scratch, without using npx create-react-app the following solution will work.

webpack: 5.75.0
node: 14.15.0
react: 18.2

First place your image file in the project, may be in the public folder.
eg. /public/assets/my-image.jpg
install copy-webpack-plugin.
```
npm i -D copy-webpack-plugin
```
(my version is 11.0.0)
In the webpack config file import the copy-webpack-plugin.
```
const CopyPlugin = require('copy-webpack-plugin');
```
In the plugins section of the webpack config file, configure like below.
```
plugins: [
    new CopyPlugin({
        patterns: [
            {
                from: path.resolve(__dirname, 'public', 'assets'),
                to: path.join(__dirname, 'dist', 'images'),
                noErrorOnMissing: true
            }
        ]
    })
]
```
What this piece of code does is that, webpack reads image files from public/assets folder and copy them in to the dist/images folder.... (I assume here that your build folder is called dist. otherwise, change accordingly )
Then in your component just reference the image in html style
```
<img src="/images/my-image.jpg" alt="my image" />
```
Just note, that the image is referenced from the dist folder.

If you plan to reference this image in the future via an open repository, then this approch is more appropriate... because you just have to change the img src url.

Hope I helped someone :) Happy coding !!!

score 0 · Answer 12 · answered May 30 '21 at 14:02

A simple solution is to use paths like this /images/logoFooter.png. If the file is located directly under the public folder, do /someImage.png. You can go deeper, /x/y/z/image.png. Treat the locating part of the image as an absolute kind of location for that image.

For more information, check out https://create-react-app.dev/docs/using-the-public-folder/.

score 0 · Answer 13 · answered May 20 '22 at 05:51

0

if you want to add your javascript file from public folder to react, put specific file to index.html file in public folder. Your problem will be solve.

answered May 20 '22 at 05:51

Ubaid Ullah Noor

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 20 '22 at 07:20

score 0 · Answer 14 · answered Mar 23 '23 at 05:03

0

Easy to Get Local Image Directory

<img className='img-fluid' src={/src/assets/${item?.['poster-image']} || '/src/assets/poster1.jpg'} alt={item?.['poster-image']} loading="lazy" />

https://i.stack.imgur.com/BQU6J.png

API Image to get the only name to search image name in the directory

"poster-image": "poster3.jpg"

https://i.stack.imgur.com/czpWe.png

answered Mar 23 '23 at 05:03

Rahul Kumar RJ

1
2

[Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551) – ugexe Mar 27 '23 at 17:14

score -3 · Answer 15 · edited Nov 13 '20 at 06:02

-3

You Could also use this.. it works assuming 'yourimage.jpg' is in your public folder.

<img src={'./yourimage.jpg'}/>

edited Nov 13 '20 at 06:02

Suraj Rao

29,388
11
94
103

answered Nov 13 '20 at 05:56

smoothVibes

1
1

ReactJS and images in public folder

15 Answers15

Linked