title: Next.js public images not showing in production build
body: <p>I have a Next.js app I am deploying to Heroku. When I dev locally I see the images, but when I push to Heroku and check the site, the images have a 404. I have a public folder where I have the images (.png) right in the folder, and the code I reference the image like this</p>
  <pre><code>&lt;Image
      src=&quot;/wb_blue_white.png&quot;
      alt=&quot;WB Concept&quot;
      width=&quot;70&quot;
      height=&quot;70&quot;
      className={navStyles.logo}
  /&gt;
  </code></pre>
  <p>Both locally and in prod the if I look at the image source they are the same <code>src=&quot;/_next/image?url=%2Fwb_blue_white.png&amp;w=256&amp;q=75&quot;</code> but I get a 404 in prod. What could be causing the image to show up localhost but not in Heroku prod build?</p>
  <p>package.json</p>
  <pre><code>&quot;scripts&quot;: {
      &quot;dev&quot;: &quot;next dev&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start -p $PORT&quot;
  },
  </code></pre>
  <p>file structure</p>
  <pre><code>components
  pages
  public
  </code></pre>