如何在 Nextjs 上导出 static 图片？

Question

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

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

我怎样才能做到这一点？

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

Answer 1

我创建了一个 npm 模块，这样我们就可以在使用 static 导出功能的同时使用 Next.js <Image/> 组件和优化图像。

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

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

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

Answer 2

我要添加到 skara9 的答案中，因为它对我来说不太管用。 我在 github 上找到了一个讨论它的线程，那里的答案对我有用。 它只是包裹了 NextJS 图像组件，对我来说非常完美。

// components/Image.js
import NextImage from "next/image";

// opt-out of image optimization, no-op
const customLoader = ({ src }) => {
  return src
}

export default function Image(props) {
  return (
    <NextImage
      {...props}
      loader={customLoader}
    />
  );
}

确保更改导入并更新next.config.js

import Image from '../components/Image.js'

Answer 3

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

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

images: {
  loader: "custom"
}

---

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

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

---

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

<Image loader={imageLoader} />