错误：使用Next.js默认加载程序进行图像优化不兼容`next export`。

Question

在将Next.js部署到Netlify时，我遇到了这个错误。

Error: Image Optimization using Next.js default loader is not compatible with `next export`.

Possible solutions:

6:47:15 AM:   - Use `next start`, which starts the Image Optimization API.
6:47:15 AM:   - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM:   - Configure a third-party loader in `next.config.js`.
6:47:15 AM:  -  Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM:   at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)

部署到 Vercel 时不会出现此问题。

- Chukwuemeka Maduekwe

Answer 1

使用akamai

将images.loader设置为'imgix'会导致开发和构建错误。

我改用了这个：

// next.config.js

module.exports = {
  images: {
    loader: 'akamai',
    path: '',
  },
}

就我关心的事情来说，它只是有效的。

images.loader 的可能取值为：[ default, imgix, cloudinary, akamai, custom ]
参考链接：https://nextjs.org/docs/pages/api-reference/components/image-legacy#built-in-loaders

- Ryan Norooz

---

在我这里，设置路径为 '/' 后它起作用了。 - Libu Mathew

Akamai是否支持图片的延迟加载？ - mihca

@mihca 懒加载是默认行为。请参见：https://nextjs.org/docs/api-reference/next/image#loading - Ryan Norooz

我花了整整一天的时间来解决这个问题。最后，我通过这个答案解决了问题。谢谢。 - undefined

Answer 2

从 Next.js 12.3 开始，您可以在 next.config.js 中使用 unoptimized 配置完全禁用 next/image 图像优化。这样，使用 next/export 时，避免了必须使用第三方提供程序来优化图像的情况。 从next/image文档中了解更多信息：

unoptimized - 当为 true 时，源图像将作为原样提供，而不会更改质量、大小或格式。默认值为 false。

module.exports = {
    images: {
        unoptimized: true
    }
}

---

在 Next.js 12.3 之前以及从 12.2 开始，unoptimized 配置仍然是实验性的，可以在 experimental 标志下启用。

module.exports = {
    experimental: {
        images: {
            unoptimized: true
        }
    }
}

- juliomalves

---

我的使用情况可以从图像优化中受益，所以我选择了一个加载器，但我很高兴在这里的第一个答案中选择不使用加载器。 - undefined

Answer 3

看起来你在使用 next/images。 但是 next/images 不能与静态页面一起使用（使用 next export 生成的页面）。 对于静态页面，请使用此图像优化器：next-optimized-images。

- suther

---

哇，谢谢你的回答，但是我找不到一种使用这个依赖项进行图片懒加载的方法。你知道怎么做吗？ - R. Karlus

应该包括@R.Karlus。通过搜索“lazy”查看文档：https://github.com/cyrilwanner/next-optimized-images - suther

Answer 4

当使用 next export 命令时，我遇到了同样的问题。我仍然收到以下错误：

Error: 使用 Next.js 的默认 loader 进行图像优化不兼容于 next export。 可能的解决方案：

• 使用 next start 运行服务器，其中包括 图像优化 API。
• 使用任何支持图像优化的服务提供商（如Vercel）。
• 在 next.config.js 中配置第三方 loader。
• 对 next/image 使用 loader 属性。

因此，为了使我的自定义 loader 正确工作，我需要将路径设置为空字符串：

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '',
  },
}

但是，当我打开生成的index.html文件时，图片和JS都没有加载。

因此，对于那些遇到同样问题的人，请尝试将路径设置为/：

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '/',
  },
}

- Ibrahim BHMBS

---

这是 next.config.js 文件吗？ - Deep Kakkar

@DeepKakkar 是的，在 next.config.js 文件中。 - Ibrahim BHMBS

如果我不在 Vercel 上部署，这个能行吗？只需要使用 next export 导出构建即可。目前在导出过程中遇到了图像优化错误。 - Deep Kakkar

@DeepKakkar 是的，在这个解决方法之后，它应该在其他地方工作。我在Netlify中测试过了，错误消失了。 - Ibrahim BHMBS

当我将所有的<Image/>替换为简单的<img/>标签时，这对我起作用了。 - Sitaram

Answer 5

目前文档给出了两个选择：

1. {loader: "custom"}（全局配置）
2. loader prop（需要自定义的Img组件）

解决方案1：在next.config.js中：

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my/image/loader.js',
  },
}

关于此配置的文档不再列举除custom之外的loader属性更多选项。尽管其他帖子指出代码库仍支持这些选项，但只有这种方式对我有效。

解决方案2：另一种选择类似于以下示例，您可以为图像创建一个新的高阶组件，并为供应商包含图像加载器。不同的图像优化供应商之间的自定义加载器函数各不相同，所以这只是目前可用的imgix的一个示例。

import Image from 'next/image'

function imageLoader({ src, width, quality }) {
  const url = new URL(`https://xyz.imgix.net/${src}`);
  const params = url.searchParams;
  params.set('auto', params.getAll('auto').join(',') || 'format');
  params.set('fit', params.get('fit') || 'max');
  params.set('w', params.get('w') || width.toString());
  params.set('q', (quality || 50).toString());
  return url.href;
}
 
function Img(props) {
  return (
    <Image 
      loader={imageLoader}
      alt={props.alt} 
      src={props.src} 
      width={props.width}
      height={props.height}
    />
  )
}

export default Img;

- stelloprint

Answer 6

Next.js 在 Vercel 上部署时不会出现这个错误。

可以通过使用本地图片加载器来解决这个问题。这将禁用图像优化 // imageLoader.js

export default function imageLoader({ src, width, quality }) {
  return `https://<app-address.domain>${src}?w=${width}?q=${quality || 75}`;
}

然后在您的应用配置中

//next.config.js

module.exports = {
  assetPrefix: "./",
  images: {
    loader: "custom",
    loaderFile: "./utils/imageLoader.js",  // <= Location of image loader
  },
}

- Chukwuemeka Maduekwe

Answer 7

这个错误与Image/next有关，我在进行“next build”时遇到了同样的错误，然后我在项目中使用了<img/>而不是<Image/>，并通过npm run build重新构建它，这样就解决了错误。

- saud00