CODEWITHSUNDEEP
next.jsnext-images
Captain
Captain

Reputation: 133

next-images breaking all the absolute paths in my next.js project

I want to have inline png images on my next.js project. As this is not a native supported feature, I'm using the next-images library for that.

This is my next.config.js

const withImages = require('next-images')
module.exports = withImages()

The problem is NOT the image import, but all the rest of imports: that code is breaking all the absolute .jsx imports on my project.

Any idea on how to solve this?

Upvotes: 1

Views: 5388

Answers (2)

Junior Tour
Junior Tour

Reputation: 640

The default behavior of next/image will add /_next/image?url= to any absolute URL of image src.

A workaround is use imgix loader and set path to '':

// next.config.js
module.exports = {
  images: {
    domains: ['yourServer.com'],
    path: '',
    loader: 'imgix',
  },
}

From source code, add root = '/_next/image?url=...' to any absolute URL src is by design: https://github.com/vercel/next.js/blob/f81a6a5f0fc3a33a51112d4d3261d431e704b0da/packages/next/client/image.tsx#L862

Why?

It's a little strange, different from the HTML <image src=""> behavior, makes users confused too.

You can follow https://github.com/vercel/next.js/issues/19206 for follow-up

Upvotes: 1

Captain
Captain

Reputation: 133

As the user @juliomalves mentioned above, the answer is on this link from the Next.js official documentation.

Basically, the issue was fixed in 2 steps:

  1. Adding a jsconfig.json file (if you're using Typescript, you should use tsconfig.json instead).

  2. changing all the absolute paths from /components/Something to components/Something (in other words, removing the first forward slash).

Upvotes: 1

Related Questions