如何在 Nextjs 上导出静态图片？

Question

当我想导出我的 nextjs 应用程序时，它说我无法在静态网站上导出我的图像。

错误：使用 Next.js 的默认加载器的图像优化与 next export 不兼容。 可能的解决方案： - 使用next start 运行服务器，其中包括图像优化 API。 - 使用任何支持图像优化的提供商（如 Vercel）。 - 在next.config.js 中配置第三方加载器。 - 为next/image 使用loader 属性。

我怎样才能做到这一点？

有没有办法让我简单地告诉它静态渲染图像？我不想通过其他在线图像加载器..

Answer 1

您需要在 Next.js 中设置自定义图像加载器

在您的 next.config.js 文件中，将此属性添加到导出：

images: {
  loader: "custom"
}

---

并制作一个名为loader.js 的脚本来导出：

function imageLoader({ src }) {
  return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY
}

module.exports = imageLoader;

---

对于每个Image 组件，手动设置loader 属性：

const imageLoader = require("PATH TO loader.js");

<Image loader={imageLoader} />