javascript - 无法设置下一个优化图像

Question

我正在尝试使用下一个 js 9.3.6设置下一个优化图像 2.6.2，之后我想做“下一个构建”和“下一个导出”并生成一个静态站点。在此之后，我希望用 amazon S3 托管它。我希望下一个优化图像也在开发时优化图像。

我的next.config.js文件看起来像

const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const path = require('path')

module.exports = withPlugins(
  [
    [withSass],
    [
      optimizedImages,
      {
        optimizeImagesInDev: true
      }
    ],
    [withCSS]
  ],
  {
    webpack (config, options) {
      config.resolve.modules.push(path.resolve('./'))
      return config
    }
  }
)

我还安装了以下优化包

"image-trace-loader": "^1.0.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"webp-loader": "^0.6.0",

我的代码中有 webp 和 png 图像，我正在以这种方式导入

import infoImage1 from 'assets/img/pages/covid/infoImage1.png'

完成后，当我运行“npm run dev”时，它显示“[ event ] build page: /home”，然后没有其他任何反应，除了光标只是闪烁。

在 chrome 浏览器中，当我尝试访问 localhost 时，页面无法加载。它只显示在选项卡上保持逆时针旋转的加载微调器。页面上不显示任何内容。

浏览器控制台或终端中均未显示错误消息。

谁能告诉我我做错了什么以及如何使下一个优化图像在静态站点设置中与下一个 js 一起使用？

提前致谢！

标签： javascriptreactjsimagenext.jsimporterror