0

From the public folder in the root of my project there is an image: download.png. In my js file, I call it like so: <img src={"/download.png"} />. However, the image doesn't load as illustrated here

In devTools, the correct element is displayed: <img src="/download.png">

When I try and directly import the png file: import download from "../public/download.png", I get the following error:

Module parse failed: Unexpected character '�' (1:0)
┃ You may need an appropriate loader to handle this file type, currently no loaders 
are configured to process this file. See https://webpack.js.org/concepts#loaders

I also started a new Nextjs project with the exact same implementation described above and the download.png image loaded from the public folder.

Another thing I tried was to use the nextjs <Image/> component. However, that did not load an image either (result was blank).

I'm using a custom server that was scaffolded with Shopify's library

How do get get images to load into my project from the public folder?

InquisitiveTom
  • 423
  • 3
  • 13

1 Answers1

-1

try using Image tag

   import Image from 'next/image';
Tanishk
  • 72
  • 1
  • 7