Static import of images using next/image not loading any images.

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

16.8.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

I’m using next/image in the project. It doesn’t load image when using this mentioned static import method. Have a look at the code of pages/test.js file.

import Image from "next/image";
import myLocalImage from "../public/images/shape.png";

const testPage = () => {
  return (
      <>
        <Image 
            src={myLocalImage} 
            alt="image 1" 
        />
        <hr/>
        <Image 
            src="/study/images/shape.png" 
            alt="image 2" 
            width="99px"
            height="195px"
        />
      </>
  );
};

export default testPage;

Note here that I’m using the basePath config with value : { basePath: '/study'} in next.config.js. And it produces the output:

Inspecting the network tab, i found the server is not giving the image (as shown in the following screenshot)

If I had to guess, I’d say because I’m using the basePath config, I think the server is not able to respond in the first case of static import! I have tried this in a dev environment - next dev and also in next start (after building first.)

For reference, I’m also posting the decoded URLs of both images here : image-1 (used by static import): http://localhost:3101/study/_next/image/?url=/_next/static/image/public/images/shape.97a1a3c616d56b9fdca81af284112b9e.png&w=256&q=75 and for image 2 (used by inline src) : http://localhost:3101/study/_next/image?url=/study/images/shape.png&w=256&q=75

Let me know if this is a known issue or I’m making any mistakes!?

Expected Behavior

The first image should load perfectly.

To Reproduce

In the next.config.js file, set the basePath option like I have:

{
    basePath: "/study",
}

Then create a page : pages/test.js, paste the following code:

import Image from "next/image";
import myLocalImage from "../public/images/shape.png";

const testPage = () => {
  return (
      <>
        <Image 
            src={myLocalImage} 
            alt="image 1" 
        />
        <hr/>
        <Image 
            src="/study/images/shape.png" 
            alt="image 2" 
            width="99px"
            height="195px"
        />
      </>
  );
};

export default testPage;

And add shape.png in the public/images directory. That’s it.

[darshantejani007]

Yes, After updating to v 12.0.7 and making changes in my next.config.js file as per the following comment, I managed to solve this.

https://github.com/vercel/next.js/issues/19711#issuecomment-750414110

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.