search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.14k stars 27.02k forks source link

When using `basePath` and statically imported images with `next/image`, `loader` must be used to add the base path #29910

Closed saevarb closed 3 years ago

saevarb commented 3 years ago

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

16.6.2

What browser are you using?

Chrome/Firefox

What operating system are you using?

Linux

How are you deploying your application?

next start

Describe the Bug

When using basePath in next.config.js, next/image must use the loader property and add basePath for the image to resolve correctly. In 11.1.2, failing to do this means the image never loads and next complains about an error from within imageOptimizer at runtime.

Expected Behavior

The default loader should probably add basePath for statically imported images.

To Reproduce

  1. Use basePath in next.config.js
  2. Display an image with next/image using a statically imported image
  3. The image never loads unless you manually add the basePath: 
          <Image
            layout="responsive"
            src={logo}
            loader={(args) => `${BASE_PATH}${args.src}`}
          />
thibautsabot commented 3 years ago

Hello!

I believe your issue has been fixed by: https://github.com/vercel/next.js/pull/29307 which is available in v11.1.3-canary.32 and onward.

Could you try out npm i next@canary and see if it fixes your problem?

balazsorban44 commented 2 years ago

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.