我无法将图像加载到NextJS中

Question

Here's a photo of my file structure. I'm new to NextJSS and still fiddling with it.我试图写这两种不同的方法都没有用。

next.config.js

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

const nextConfig = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|svg)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 100000
        }
      }]
    })
    return config
  }
}

module.exports = withPlugins([
  [withCSS],
  [withSass],
  [optimizedImages]
], nextConfig);

next.config.js

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

module.exports = withCSS(
  withSass(withImages({
    webpack (config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|jpeg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      })
      return config
    }
  })))

我正在这样导入图像：

import picOne from '../images/picOne.png';
import picTwo from '../images/picTwo.png';

我也尝试过这样使用它们：

 <img src={require('../images/picOne.png')} alt="image" />

我也尝试过将url-loader与file-loader交替使用。

尚未找到任何可解决此问题的在线方法：（