Do I store Image assets in public or src in reactJS?

Question

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?

@RickLee I think he's using create-react-app that's how I encountered the same error. And it's using webpack 2. — ickyrr
– ickyrr, Commented Jun 20, 2017 at 3:05
You should read this answer 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
– ickyrr, Commented Jun 20, 2017 at 3:10

Matt Saunders · Accepted Answer · 2017-07-25 10:11:12Z

200

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.

answered Jul 25, 2017 at 10:11

Matt Saunders

4,4307 gold badges35 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Fadhil Ahmad Over a year ago

what does it mean by "not used by your app"?

ogostos Over a year ago

@Fadhil guess it means not of actual usage in any React component or in stylesheets

Matt Saunders Over a year ago

@Fadhil not required for the app to compile

GermanJablo Over a year ago

I don't think it's correct to say that a favicon is "outside the app", although I can understand what you mean by that. Is there any other example besides the favicon that should be in public? Could you explain why?

Emre Bener Over a year ago

to clarify, you put static assets that are used by index.html into the public folder, and you manage other static assets that are accessed by your components in src/assets folder.

|

krichey15 · Accepted Answer · 2019-07-16 17:31:02Z

61

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

answered Jul 16, 2019 at 17:31

krichey15

6891 gold badge7 silver badges15 bronze badges

1 Comment

Eric B Jun 25 at 12:53

Very unhelpful answer. It may be common practice, but why is it good practice?

Smile · Accepted Answer · 2020-04-29 06:38:11Z

33

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.

Scripts and stylesheets get minified and bundled together to avoid extra network requests.

Missing files cause compilation errors instead of 404 errors for your users.

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

edited Apr 29, 2020 at 6:38

Smile

4,1484 gold badges30 silver badges44 bronze badges

answered Apr 20, 2020 at 13:18

MJ Studio

4,7011 gold badge31 silver badges42 bronze badges

3 Comments

Erik Over a year ago

What if the ReactJc project houses 20.000 images? And also users can download images!

MJ Studio Over a year ago

I think storing 20,000 into project is not good idea. Use remote storage and download and use it

Erik Over a year ago

I know about remote storage the question is how to do it in one of the assets-in-public-or-src

Aviv Hadar · Accepted Answer · 2020-12-30 18:51:36Z

13

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.

answered Dec 30, 2020 at 18:51

Aviv Hadar

4901 gold badge5 silver badges10 bronze badges

Comments

Art · Accepted Answer · 2021-10-30 12:48:53Z

11

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.

edited Oct 30, 2021 at 12:48

Art

3,1614 gold badges24 silver badges41 bronze badges

answered Sep 25, 2019 at 12:06

Ali Alizadeh

3612 silver badges8 bronze badges

2 Comments

Double_A Over a year ago

Why would you say an image is not static?

Syed M. Sannan Over a year ago

This answer makes no sense whatsoever, I don't get how it has 15 upvotes...

Sabesan · Accepted Answer · 2019-12-12 14:56:47Z

10

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.

answered Dec 12, 2019 at 14:56

Sabesan

7121 gold badge10 silver badges17 bronze badges

Comments

Rupam Kundu · Accepted Answer · 2019-12-06 04:43:15Z

8

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.

answered Dec 6, 2019 at 4:43

Rupam Kundu

3491 gold badge3 silver badges11 bronze badges

Comments

Aakash · Accepted Answer · 2024-04-30 08:50:59Z

7

Difference between `public` and `src/assets` folders:

public folder is for anything that is being imported into your index.html
src/assets folder is for anything that is imported in your js/ts/jsx/tsx/...etc... files that are in the src folder.

Example of referring files that are in `public` folder

<!-- index.html -->
<head>
  <link rel="manifest" href="/manifest.json">
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>

Example of referring files that are in the `src/assets` folder

// src/App.tsx

import Logo from "./assets/logo.svg"

export default () => {

   return <img src={Logo} /> 
}

answered Apr 30, 2024 at 8:50

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

Comments

Kesavaraja Krishnan · Accepted Answer · 2022-11-09 05:30:02Z

1

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.

answered Nov 9, 2022 at 5:30

Kesavaraja Krishnan

211 silver badge5 bronze badges

Collectives™ on Stack Overflow

Do I store Image assets in public or src in reactJS?

9 Answers 9

7 Comments

1 Comment

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

3 Comments

Comments

2 Comments

Comments

Comments

Difference between `public` and `src/assets` folders:

Example of referring files that are in `public` folder

Example of referring files that are in the `src/assets` folder

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

1 Comment

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

3 Comments

Comments

2 Comments

Comments

Comments

Difference between public and src/assets folders:

Example of referring files that are in public folder

Example of referring files that are in the src/assets folder

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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

Difference between `public` and `src/assets` folders:

Example of referring files that are in `public` folder

Example of referring files that are in the `src/assets` folder