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

Question

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

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

我怎样才能做到这一点？

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

Answer 1

我创建了一个 npm 模块，以便我们可以在使用静态导出功能的同时使用带有优化图像的 Next.js <Image/> 组件。

https://www.npmjs.com/package/next-image-export-optimizer

该库包装了 Next.js 的 <Image /> 组件，并在导出时使用 Sharp.js 自动创建优化的图像。

它使用自定义加载器为 Next.js 的 <Image /> 组件创建的 <img /> 创建 srcset。然后在构建/导出时，使用 Sharp.js 优化 public/images 文件夹（作为示例）内的图像并将其复制到构建文件夹中。

Answer 2

您需要在 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设置prop：loader

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

<Image loader={imageLoader} />