Nextjs 如何导出静态图片？

Question

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

Error: Image Optimization using Next.js' default loader is not compatible with next export. Possible solutions: - Use next start to run a server, which includes the Image Optimization API. - Use any provider which supports Image Optimization (like Vercel). - Configure a third-party loader in next.config.js. - Use the loader prop for next/image.

我怎样才能做到这一点？

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

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} />

Answer 2

我要补充 skara9 的答案，因为它对我来说不太管用。我在 github 上找到了一个讨论它的 thread，那里的答案对我有用。它只是包裹了 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

我创建了一个 npm 模块，这样我们就可以在使用静态导出功能的同时使用具有优化图像的 Next.js 组件。

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

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

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

Nextjs 如何导出静态图片？

How to export static images on Nextjs?

javascript

next.js

nextjs-image

next-images