next.js - next-images 打破了我的 next.js 项目中的所有绝对路径

Question

我想在我的 next.js 项目中有内联 png 图像。由于这不是本机支持的功能，因此我正在使用该next-images库。

这是我的next.config.js

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

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

关于如何解决这个问题的任何想法？

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

为什么？

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

2 回答 2