React CRA - Images Ecosystem

Question

When using create-react-app, in what directory should my images folder be?

in src or public?

Will one or the other present issues when I'm ready to run yarn build?

I heard that only files placed in public directory will be loaded after a build. True or False?

I guess this comment by the react team on index.html has me confused.

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder 
          during the build.
          Only files inside the `public` folder can be referenced from 
          the HTML.
          Unlike "/favicon.ico" or "favicon.ico", 
          "%PUBLIC_URL%/favicon.ico" will
         work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

EDIT: After reading the comments below this is how structured my images folder inside the src folder. Can you please tell me if this is a good/best practice?

**Images Component**
import Foo from "./images/foo.jpg";
import Bar from "./images/bar.jpg";
import './styles/Images.css';

export const Logo = () => (
    <img src={Foo} alt="bla bla" />
)
export const Profile = () => (
    <img src={Bar} alt="bla bla" />
)

A component that I want to use the images.

import { Logo, Profile } from './Images';

const Home = () => (
   <div>
    <Logo/>
    <Profile/>
   </div>
)

score 3 · Accepted Answer · edited Feb 27 '19 at 14:29

3

You should create a folder under src for the images. Then just use import './myImage.png' as imageThatIsMine to import them into a .js file.

In a .css you would use

.myClass {
  background-image: url('./myImage.png')
}

Doing it this will insure that webpack correctly moves the file to the build folder and appends the correct paths.

See the docs for more info.

If you place anything outside of the src folder and try to import you will get an error telling you to use src.

You can place items in the ;public' folder but it is not recommend. See docs

If you do use the public folder you will need to prefix with %PUBLIC_URL% when you use them.

edited Feb 27 '19 at 14:29

Mosijava

3,941
3
27
39

answered Feb 04 '18 at 00:53

bluesixty

2,367
3
21
21

Thank you! Can you see my edit on the question and tell me if I'm on the right track? – Null isTrue Feb 04 '18 at 01:48
Your change will work but, most people just import the image into the component that uses it. There isn't a need to create a separate component for every image, unless that is what you want. – bluesixty Feb 04 '18 at 02:03
My intent here is to have all app images living in one file for easy access and modification. – Null isTrue Feb 04 '18 at 02:15

React CRA - Images Ecosystem

1 Answers1