Having trouble loading image with webpack file-loader

Question

I'm currently working on a project using React and webpack, but I'm new to both. I need to display an image from the server's filesystem. I'm attempting to use webpack's file-loader to display the image, but I'm having trouble getting it to work.

Edit: I've made a couple changes due to some suggestions and I'm having a slightly different problem than my original problem. After switching from requiring the image to importing the image, I now get a correct file path, "images/7047aa4de98575625fc771ca68618c28.png". I now have my webpack file-loader outputing to that directory, and I do have an image called images/7047aa4de98575625fc771ca68618c28.png on my filesystem, but I get a 404 NOT FOUND response when I attempt to display the image.

My webpack config is here:

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.(jpg|png|svg)$/i,
              loader: 'file-loader',
              options: {
                outputPath: 'images',
              }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

And the relevant part of my code attempting to get the image is here:

// const catImage = require('./data/images/cat.png');
import catImage from './data/images/cat.png';

const root = '/api';

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={Upload} exact />
            <Route path="/share/:key" component={Share} />
            <Route path="/test" component={Test} />
            <Route component={Error}/>
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

class Test extends React.Component {
  render() {
    const gat = catImage;

    return (
      <div>
        <img src={gat} />
      </div>
    )
  }
}

Answer 1

Switching to url-loader instead of file-loader made it work. I do not know why file-loader did not work. Oh well.

var path = require('path');

module.exports = {
    entry: './src/main/js/app.js',
    devtool: 'sourcemaps',
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        rules: [
            {
              test: /\.(jpg|png|svg)$/i,
              loader: 'url-loader',
              options: {
                outputPath: 'images',
              }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

Make sure you use either

import image from './path/to/image.png';

OR

const image = require('./path/to/image.png');
const imageSrc = image.default;

You can also do:

const imagePath = require.context('./path/to/imageDirectory', true);
const imageSrc = imagePath('./image.png', true);