1

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

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

我怎样才能做到这一点？

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

4

2 回答 2

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} />
于 2021-12-27T20:35:14.267 回答
0

我将添加到 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'
于 2022-02-19T04:10:02.243 回答