Webpackのfile-loaderで画像ファイルを表示できません

Question

file-loaderを追加し、webpackを書き換えましたが表示されず。
画像はsrc/images/img.pngで、コンポーネントはsrc/js/components/にあります

// webpack.config.js

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }]
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader"
      },
      {
          test: /.(png|jpg|gif)$/,
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }
      },
      {
        // 追記
        test: /.(jpg|png)$/,
        loaders: 'url-loader'
      }]
    },
    output: {
      path: __dirname + "/src/",
      filename: "client.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

import React from "react";
import imgimg from "../../images/img.png";
console.log(imgimg);
export default class Top extends React.Component {
  render() {
    return (
      <div>
        <img src={imgimg} />
      </div>
    );
  }
}