Question

当我要出口我的下几秒时,我说,我不能在固定网站上输出我的图像。

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

你们需要在下台安装一个定制图像载体。 j)

在next.config.js 文档中,将这一财产添加到出口中:

images: {
  loader: "custom"
}

出口:

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

module.exports = imageLoader;

For each Image component, set the loader prop manually:

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

<Image loader={imageLoader} />

Answer 2

我创建了一个npm模块,以便我们能够使用下游产品;Image/>部件,在使用静态出口功能时使用优化图像。

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

图书馆收集了“带”;Image /> 下一.js部分的内容,并在出口时自动生成最佳图像。

它使用一种习俗装载器为“ &”制造弧;“im”/“&”;“Image”/“&”成分产生。然后,在建筑/出口时,公共/娱乐圈子(例如)的图像被优化,并抄录到建筑夹中。

Answer 3

我会补充一下Skara9的回答,因为它对我的工作不多。我发现 thread。这只是围绕下司法学院图像部分进行的总结,对我来说,工作是毫无道理的。

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

确保您的进口发生变化,并更新<编码>。

import Image from  ../components/Image.js

Answer 4

The most simple solution now is to just opt-out of next Image optimization. This was no issue for my project. You can do this by adding this to your next.config.js:

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

或者,你可以使用不需要服务器运行时间的定制装货机,我获得建议,因为:

It s probably easier to just use a supported cloud Image loader like cloudinary.
You could just as easy use Next s built-in image optimiser which you can launch with next start.

然而,如果你真想使用一种习俗预处理器和装载器,你可使用。 https://www.npmjs.com/ Package/next-image-export-optimizer 如先前的答复所述。

Answer 5

对于那些自2023年以来希望出口最佳图像的人来说,你们可以在这里读到更多的东西!

https://next-export-optimize-images.vercel.app/docs/comparison#next-image-export-optimizer” rel=“nofollow noreferer”>https://next-export-optimize-images.vercel.app/docs/comparison#next-image-export-optimizer

安装

yarn add -D next-export-optimize-images

and

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

然后改变建筑设计

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

你们都需要这样做。

友情链接