title: Image is not loading while using React
body: <p>I am trying to build a site using react.js and I was able to render the picture but I am not able to view the picture. I need some help. I am creating a website for a client. I am trying to render the image from Header.jsx. The picture is saved in public/Images/Img1.jpg. I have a component folder which as App.jsx, CreateArea.jsx, Header.jsx, Footer.jsx and Navbar.jsx.</p>
  <p>[Error with pic</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import NavbarHeader from "./Navbar";
  
  
  
  function Header() {
    return (
      &lt;header&gt;
      &lt;NavbarHeader
      /&gt;
      &lt;h1&gt;SyncTech Solutions- Take your business beyond the four walls. &lt;/h1&gt;
      &lt;img src = "/Images/Img1.jpg"&gt;&lt;/img&gt;
      &lt;/header&gt;
    );
  }
  
  export default Header;</code></pre>
  </div>
  </div>
  </p>
  <p>]<a href="https://i.stack.imgur.com/8Zw28.png" rel="nofollow noreferrer">1</a></p>