npm run build 给出错误：图像优化答案

【问题标题】：npm run build gives an Error : Image Optimizationnpm run build 给出错误：图像优化
【发布时间】：2021-08-18 22:32:00
【问题描述】：

我是 Next.js 的新手，我构建了一个简单的登录页面，并希望使用我在 package.json 中设置为 "build": "next build && next export" 的 npm run build 生成一个静态页面。但我得到这个错误：

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`.

谁能帮帮我，我阅读了文档并在根目录中创建了 next.config.js 并将其粘贴：

module.exports = {
  images: {
    loader: 'imgix',
    path: '/images/',
  },
}

我认为我需要一个路径，但问题是我没有使用托管图像，我在公共文件夹中有一个图像文件夹。

我知道这可能是一个愚蠢的问题，但我被困住了。

【问题讨论】：

您需要使用第三方云提供商来优化您的 next/image 图像，使用 next export - 这需要您将它们托管在这样的云提供商上。
知道了。我在imgbb.com 上托管了它们，并在 next.config.js 中写了这个 `module.exports = { images: { domain: ['i.ibb.co'], }, } ` 它奏效了。谢谢。

标签： next.js nextjs-image

【解决方案1】：

我将它们托管在 https://imgbb.com 上并在 next.config.js 中编写了这个

module.exports = { 
    images: { 
        domains: ['i.ibb.co'],
    },
}

它成功了。

用法：

<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg" 
       alt="ESMASA TRAVAUX"
       width={1050}
       height={500}
/>

【讨论】：