Next.js 图像路径导致 404

Question

所以我有一个包含大量图像的应用程序，我正在尝试最大限度地提高效率/缩短页面加载时间。我可以通过 next.js /public 文件夹访问我的图像，但问题是当页面呈现时，所有图像都通过 http 请求，并且图像在请求填满后才呈现，然后其他 javascript /css 用于样式和放置。因此，我没有请求我的图像，而是尝试在本地导入它们，但是我尝试的每种方法似乎都陷入了另一个错误的兔子洞，并且我已将其缩小到两个看起来可行但仍然存在问题的方法。

方法一：进口和采购

根据 next.js 文档 https://nextjs.org/docs/basic-features/image-optimization 你应该能够像

一样导入和来源

import image from '../public/static/background.png'

const ImageComponent = () => {
    return (
        <Image
           alt="loading..."
           src= {image}
           layout="fill"
        />
    )
}

但是当我这样做时，我收到以下错误

方法#2：next.js 构建文件夹

所以有一些有趣的事情。就像我之前在应用程序的工作版本中所说的那样，我将所有图像托管在 /public 文件夹中并请求它们页面加载。但是，我导入的仅有的两个图像实际上被添加到我的 .next 构建文件夹中路径或网址。请帮忙！

package.json

  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "css-loader": "^5.2.7",
    "express": "^4.17.1",
    "next": "10.0.5",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.8.1",
    "next-optimized-images": "^2.6.2",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.12",
    "path": "^0.12.7",
    "pm2": "^5.1.0",
    "postcss-loader": "^6.1.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "sass": "^1.35.2",
    "style-loader": "^3.1.0"
  },
"devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "mini-css-extract-plugin": "^2.1.0",
    "sass-loader": "^10.2.0",
    "webpack": "^4.0.0"
  }

next.config.js

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

module.exports = withPlugins([
  optimizedImages(),
  withImages({
    fileExtensions: ["jpg", "jpeg", "png", "gif"],
  }),
  withSass(withCss({
    webpack: (config, { dev }) => {
      config.module.rules.push(
        {
          test: /\.(png|jpg|jpeg|gif|webp|ico|bmp|svg)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      );
      return config;
    }
  }))
])