如何在Nextjs上导出静态图像?

wixjitnu  于 2023-10-18  发布在  其他
关注(0)|答案(5)|浏览(201)

当我想导出我的nextjs应用程序时,它说我不能在静态网站上导出我的图像。
错误:使用Next.js的默认加载器进行图像优化与next export不兼容。可能的解决方案:- 使用next start运行服务器,其中包括图像优化API。- 使用任何支持图像优化的提供程序(如Vercel)。- 在next.config.js中配置第三方加载器。- 使用next/imageloader prop 。
我怎样才能让它这样做呢?
有没有一种方法可以让我简单地告诉它静态渲染图像?我不想去其他在线图像加载器..

uinbv5nw

uinbv5nw1#

我创建了一个npm模块,这样我们就可以在使用静态导出功能的同时使用Next.js组件和优化的图像。
https://www.npmjs.com/package/next-image-export-optimizer
该库 Package 了Next.js的组件,并在导出时使用sharp.js自动创建优化的图像。
它使用自定义加载器为Next.js组件创建的创建srcset。然后在构建/导出时,public/images文件夹中的图像(例如)会使用sharp.js进行优化,并复制到构建文件夹中。

yr9zkbsy

yr9zkbsy2#

您需要在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} />
2exbekwf

2exbekwf3#

我将把skara9的答案加进去,因为它对我不太起作用。我在github上找到了一个thread讨论它,那里的答案对我很有效。它只是 Package 在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'
6yoyoihd

6yoyoihd4#

现在最简单的解决方案是选择退出下一个图像优化。这对我的项目来说不是问题。你可以把这个添加到next.config.js中:

output: 'export',
images: {
    unoptimized: true,
}

或者,您可以使用不需要服务器运行时的自定义加载器,我不建议这样做,因为:
1.使用像cloudinary这样受支持的云图像加载器可能更容易。
1.您可以轻松使用Next的内置图像优化器,您可以使用next start启动。
但是,如果你真的想使用自定义的预处理器和加载器,你可以像前面的回答中提到的那样使用https://www.npmjs.com/package/next-image-export-optimizer

toe95027

toe950275#

对于那些想要从2023年起使用next.js导出优化图像的人,您可以在这里阅读更多信息!
https://next-export-optimize-images.vercel.app/docs/comparison#next-image-export-optimizer
安装它

yarn add -D next-export-optimize-images

并用作nextjs插件

const withExportImages = require(  "next-export-optimize-images");
module.exports = withExportImages({...baseConfig, output: "export"})

然后更改构建脚本

{
-  "build": "next build",
+  "build": "next build && next-export-optimize-images",
}

就是你要做的

相关问题