[BUG] ImageComponent does not work when combine `trailingSlash` and `basePath`

[raulfdm]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.14.2
      npm: 7.24.2
      Yarn: 1.22.17
      pnpm: 6.27.1
    Relevant packages:
      next: 12.1.7-canary.1
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

Microsoft Edge Version 101.0.1210.32 (Official build) (arm64)

How are you deploying your application? (if relevant)

next start

Describe the Bug

When we combine basePath with trailingSlash, the next/image component does not applies the correct src and srcSet.

It always generates /_next/... instead /<base-path>/_next/....

That leads to images not loading properly.

Expected Behavior

Add the basePath into the generated src and srcSets so the image can be loaded properly.

To Reproduce

1. clone this project: https://github.com/raulfdm/next-basepath-trailing-image-bug
2. install the dependencies npm install
3. run the server npm run dev
4. open the app at http://localhost:3001/docs/
5. see the image component failing
6. press the button that adds the base path
7. the image should be properly displayed

If you run npm build && npm start, the image will still be broken.

[bigsml]

could temporary resolve the problem by adding following to file next.config.js

  images: {
    path: "/<base-path>/_next/image",
  },

[styfle]

Looks like the order of these two if statements needs to be flipped:

next.js/packages/next/server/config.ts

Lines 398 to 410 in 1f68a5d

	if (images.path) {
	if (
	(images.loader !== 'default' &&
	images.path[images.path.length - 1] !== '/') ||
	result.trailingSlash
	) {
	images.path += '/'
	}
	}
	if (images.path === imageConfigDefault.path && result.basePath) {
	images.path = `${result.basePath}${images.path}`
	}

[PGuimarais]

Looks like the order of these two if statements needs to be flipped:

next.js/packages/next/server/config.ts

Lines 398 to 410 in 1f68a5d

	if (images.path) {
	if (
	(images.loader !== 'default' &&
	images.path[images.path.length - 1] !== '/') ||
	result.trailingSlash
	) {
	images.path += '/'
	}
	}
	if (images.path === imageConfigDefault.path && result.basePath) {
	images.path = `${result.basePath}${images.path}`
	}

Yep. After patching the file images are now working. Thanks @styfle

[fbarrailla]

The issue is still happening with next@12.3.1.

See the reproduction here:

• CodeSandbox
• Repository

[nmalyarsky]

That's actually not the problem with the trailingSlash per se. It is caused by the images property being explicitly declared in your config file. Without that declaration images variable in server/config.ts is in fact the very same object in memory as the imageConfigDefault one. So no matter what changes are made to the path property, condition images.path === imageConfigDefault.path on line 408 always passes.

It stops working in case of custom images config, because in that scenario imageConfigDefault is left intact (i.e. its path has a constant value of /_next/image) and images object mutates (i.e. path changes to /_next/image/ due to trailingSlash option presence).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.