Image doesn't work with basePath and assetPrefix

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

15.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

ssr app -> gitlab + docker + kubernetes

Describe the Bug

Image component build with incorrect url when basePath/assetPrefix defined

For /public/art/my-logo.svg: Actual url: http://localhost:3000/ui/_next/image?url=%2Fart%2Fmy-logo.svg&w=2048&q=75 404 When i add /ui — http://localhost:3000/ui/_next/image?url=%2Fui%2Fart%2Fmy-logo.svg&w=2048&q=75 200

Expected Behavior

Image correctly handling assetPrefix/basePath

To Reproduce

1. Place a svg file into /public/art/my-logo.svg
2. Add

<Image src='/art/my-logo.svg' layout='fill'/>

1. Run app with next.config.js:

basePath: '/ui/',
assetPrefix: `/ui/`,

No image displayed. But if i change src with prefix like below:

<Image src='/ui/art/my-logo.svg' layout='fill'/>

It working.

I expect — Image handle basePath correctly. Or maybe i do sth wrong?

[ijjk]

Hi, as mentioned in https://github.com/vercel/next.js/issues/20097#issuecomment-752727883 it is currently required to pass the basePath to the src for next/image, using the loader solution mentioned above is a valid way to handle this automatically so I’m gonna close this as it doesn’t appear to be a bug.

[charlzyx]

@lavcraft you are not alone, I have the same bug, and maybe reason is here. <Image > will wrapper your src to request url BASEPATH/_next/image?url=PATHINPUBLIC and then in Here: L217

the router handler try the url=PATHINPUBLIC params as href by inner mock request, but without basePath, so it cannot resolve the image in public;

and pr maybe like this:

href = url -> href = (nextConfig.basePath || '') + url

at Here: L70

and why not direct fix at L217 here is because href was used by hash creator at L124 so shoule be fix early.

and i have a pr to fix this https://github.com/vercel/next.js/pull/22759

in other way, util vercel fix this, you can fix with client component like this

import React from 'react';
import Image from 'next/image';

const basePath = process.env.NEXT_PUBLIC_BASE_PATH;

const ImageWithBasePath: typeof Image = (props) => {
  const url = props.src?.startsWith('/')
    ? `${basePath || ''}${props.src}`
    : props.src;
  return <Image {...props} src={url}></Image>;
};

export default ImageWithBasePath;

export your basePath in env as NEXT_PUBLIC_BASE_PATH and replace the import Image form 'next/image' by ‘import Image from ‘comppath’’