130

I am using react for my application. I have a div that I would like to have a background image. But I can't get it to show.

When I include it in the src folder as myapp/src/bgimage.png it works perfectly but I've heard that I should include it in a folder named images at the root level so it's myapp/images/bgimage.png, however this does not work for me and gives me:

You attempted to import ../images/bgimage.png which falls outside of the project src/ directory.'

Can anyone tell me the proper way to include image assets in reactJS?

Cà phê đen
  • 1,883
  • 2
  • 21
  • 20
mohammad chughtai
  • 1,694
  • 2
  • 12
  • 21
  • 1
    Are u using webpack or other bundler? – Rick Lee Jun 20 '17 at 02:58
  • 2
    @RickLee I think he's using `create-react-app` that's how I encountered the same error. And it's using `webpack 2`. – ickyrr Jun 20 '17 at 03:05
  • 2
    You should read [this answer](https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory) it's a similar issue to yours. I've encountered the same issue as well, what I did was just put the `assets` folder inside the `src` directory. – ickyrr Jun 20 '17 at 03:10

8 Answers8

170

public: anything that is not used by your app when it compiles

src: anything that is used when the app is compiled

So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.

Matt Saunders
  • 4,073
  • 7
  • 33
  • 47
53

I would add that creating an "assets" folder inside the "src" folder is a good practice.

krichey15
  • 591
  • 6
  • 14
29

Use /src if you are using create-react-app

If you are using create-react-app, You need to use /src for the following benefits.

  1. Scripts and stylesheets get minified and bundled together to avoid extra network requests.
  2. Missing files cause compilation errors instead of 404 errors for your users.
  3. Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

Also, if you are using webpack's asset bundling anyway, then your files in /src will be rebuilt.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

See this link

Smile
  • 3,832
  • 3
  • 25
  • 39
MJ Studio
  • 3,947
  • 1
  • 26
  • 37
  • What if the ReactJc project houses 20.000 images? And also users can download images! – Erik Aug 23 '20 at 09:28
  • 2
    I think storing 20,000 into project is not good idea. Use remote storage and download and use it – MJ Studio Aug 23 '20 at 16:04
  • I know about remote storage the question is how to do it in one of the assets-in-public-or-src – Erik Aug 23 '20 at 19:06
15

No,

public folder is for static file like index.html and ...

I think you should make an "assets" folder in src folder and access them in this way.

Art
  • 2,836
  • 4
  • 17
  • 34
Ali Alizadeh
  • 326
  • 2
  • 6
11

In this article, I mentioned that

Keep an assets folder that contains top-level CSS, images, and font files.

In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.

Sabesan
  • 654
  • 1
  • 10
  • 17
9

According to the create-react-app documentation, regarding the use of the public folder:

Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:

  • You need a file with a specific name in the build output, such as manifest.webmanifest.
  • You have thousands of images and need to dynamically reference their paths.
  • You want to include a small script like pace.js outside of the bundled code.
  • Some libraries may be incompatible with webpack and you have no other option but to include it as a tag.
Aviv Hadar
  • 330
  • 4
  • 8
6

In continuation with the other answers I would further like to add that you should create an 'assets' folder under 'src' folder and then create 'images' folder under 'assets' folder. You can store your images in the 'images' folder and then access them from there.

Rupam Kundu
  • 271
  • 1
  • 3
  • 10
0

As per my understanding I will go with easier way. If you use your assets from public folder, after build contents from public will be maintained as same. So, if you deploy your app, the contents from public folder will also be loaded while your app loads. Assume your build is 5 MB (4 MB assets and 1 MB src) the 4 MB will get downloaded first then follows the src contains. Even if you use lazy and suspense your app will be slow during deployment.

Kesavaraja Krishnan
  • 11
  • 1
  • 4