Next.js 导出 - 自定义图像加载器不工作

Question

我正在尝试构建和导出我的 Next.JS 项目，但在导出时遇到图像优化错误。

我创建了一个自定义加载器，创建了一个文件/services/imageLoader.js，内容如下：

export default function LocalImageLoader({src, width, quality}) {
    var fileName = src.split("/").pop();
    return `./_next/static/media/${fileName}`;
}

而且，在我使用 next/image 组件的所有页面中，我已将 loader 属性添加到 ，指向我的 LocalImageLoader 函数，这样：

import LocalImageLoader from '../services/imageLoader';
import logoImage from '../resources/images/logo.png';

// boring stuff here
<Image loader={LocalImageLoader} src={logoImage} alt="Logo" className="img-fluid" />
// more boring stuff here

之后，每次我尝试运行 npm run export（我在 package.json 中设置了运行 next build && next export 的导出脚本）时，我的屏幕都会出现以下错误：

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`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/export/index.js:256:23
    at async Span.traceAsyncFn (/home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/trace/trace.js:74:20)

谁能告诉我我做错了什么？

谢谢！

Answer 1

您忘记将自定义加载程序添加到 next.config.js。您将需要在下面的 sn-p 中执行类似操作。如果您不成功，则有可用的加载器，因为默认加载器在您导出时将不起作用。

module.exports = {
  images: {
    loader: 'custom',
    path: 'https://example.com/myaccount/',
  },
}

更多信息在这里：https://nextjs.org/docs/api-reference/next/image#loader-configuration