接下来-图像破坏了我的next.js项目中的所有绝对路径。

Question

我希望在我的next.js项目中有内联的png图像。由于这不是一个本机支持的特性，因此我将使用next-images库。

这是我的next.config.js

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

问题不是图像导入，而是所有其他导入:该代码正在破坏我的项目中的所有绝对.jsx导入。

知道怎么解决这个问题吗？

Answer 1

正如上面提到的用户@juliomalves，答案是在这个链接上来自Next.js官方文档。

基本上，这个问题分两个步骤解决：

1. 添加一个jsconfig.json文件(如果您使用的是类型记录，则应该使用tsconfig.json )。
2. 将所有绝对路径从/components/Something更改为components/Something (换句话说，删除第一个正斜杠)。

Answer 2

next/image的默认行为将将/_next/image?url=添加到图像src的任何绝对URL中。

解决方法是使用imgix loader并设置''的路径

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

从源代码中，将root = '/_next/image?url=...'添加到任何设计的绝对URL src中：https://github.com/vercel/next.js/blob/f81a6a5f0fc3a33a51112d4d3261d431e704b0da/packages/next/client/image.tsx#L862

为什么？

这有点奇怪，不同于HTML的<image src="">行为，也让用户感到困惑。

您可以跟踪https://github.com/vercel/next.js/issues/19206进行后续跟踪。