I have a simple image in public folder:

public\large_logo.png

I keep trying to display it but it does not show up:

<Image
        src="/large_logo.png"
        alt="Logo"
        width={40}
        height={40}
        className={cn(
          "aspect-square h-fit flex-none rounded-full bg-secondary object-cover sm:ms-auto",
        )}
      />

I tried to set a link to an external image in the src and it works.

So I'm guessing the problem is with the image placement.
Anyone has any idea what's going on?

I have a simple image in public folder:

public\large_logo.png

I keep trying to display it but it does not show up:

<Image
        src="/large_logo.png"
        alt="Logo"
        width={40}
        height={40}
        className={cn(
          "aspect-square h-fit flex-none rounded-full bg-secondary object-cover sm:ms-auto",
        )}
      />

I tried to set a link to an external image in the src and it works.

So I'm guessing the problem is with the image placement.
Anyone has any idea what's going on?

• reactjs
• next.js
• nextjs14
• nextjs-image

• Can you show your project folder structure? – Olaf Commented Mar 6 at 11:59

2 Answers 2

Possible solution:

The most common reasons for this issue are:

1. Filename and Path Mismatch:

   • Double-check the filename and path. Ensure the filename large_logo.png matches exactly (case-sensitive) the file in your public folder.
   • The path /large_logo.png is correct for accessing files directly within the public directory.

2. Image Component Dimension Requirements:

   • The Next.js Image component requires width and height attributes. Ensure these are accurately set.

3. Image File Issues:

   • Test with a different, simpler image (e.g., a basic JPEG or PNG). This will isolate whether the issue is with the specific image file.

4. Development Server Restart:

   • If you added the image to the public folder after your development server started, restart the server (npm run dev or yarn dev).

5. Browser Developer Tools (Network Tab):

   • Open your browser's developer tools (F12) and go to the "Network" tab.
   • Refresh the page and look for large_logo.png.
   • A 404 status code indicates the file isn't found.

6. Test with a Standard <img> Tag:

   • Replace the Image component with a standard <img> tag:

   <img src="/large_logo.png" alt="Logo" width="40" height="40" />
   

   • If the <img> tag works, the issue lies specifically with your Image component usage.

Maybe this one will work:

import Image from 'next/image';
import cn from 'classnames';

export default function MyComponent() {
  return (
    <Image
      src="/large_logo.png"
      alt="Logo"
      width={40}
      height={40}
      className={cn(
        "aspect-square h-fit flex-none rounded-full bg-secondary object-cover sm:ms-auto",
      )}
    />
  );
}

Do you use anything like Chakra UI or something like that?

Images under /public can be shown directly from URL. Try to open it and see if is visible. If so, may is do to some CSS classes or something about Image tag. Did you tryied to use the tag (the classic tag and not the component) to see if it work?