title: React CRA - Images Ecosystem
body: <p>When using create-react-app, in what directory should my images folder be?</p>
  
  <p>in <code>src</code> or <code>public</code>?</p>
  
  <p>Will one or the other present issues when I'm ready to run <code>yarn build</code>?</p>
  
  <p>I heard that only files placed in <code>public</code> directory will be loaded after a build. <strong>True or False</strong>?</p>
  
  <p>I guess this comment by the react team on <code>index.html</code> has me confused.</p>
  
  <pre><code>    &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
          &lt;!--
            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`.
      --&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> After reading the comments below this is how structured my images folder inside the <code>src</code> folder.
  Can you please tell me if this is a good/best practice?</p>
  
  <pre><code>**Images Component**
  import Foo from "./images/foo.jpg";
  import Bar from "./images/bar.jpg";
  import './styles/Images.css';
  
  export const Logo = () =&gt; (
      &lt;img src={Foo} alt="bla bla" /&gt;
  )
  export const Profile = () =&gt; (
      &lt;img src={Bar} alt="bla bla" /&gt;
  )
  </code></pre>
  
  <p><strong>A component that I want to use the images.</strong></p>
  
  <pre><code>import { Logo, Profile } from './Images';
  
  const Home = () =&gt; (
     &lt;div&gt;
      &lt;Logo/&gt;
      &lt;Profile/&gt;
     &lt;/div&gt;
  )
  </code></pre>