下一张图片破坏了我的 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官方文档中的答案是on this link

基本上，问题已通过 2 个步骤解决：

Answer 2

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

解决方法是使用 imgix loader 并将路径设置为 '':

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

为什么？

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

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