Импорт изображений SVG / PNG из локального хранилища

Question

Я пытаюсь загрузить изображения из локального хранилища, но я перепробовал все опции, оставленные в stackoverflow, но пока не работает. Ниже приведена структура папок

И ниже код для file-loader

{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[hash].[ext]',
    },
},

Я попытался использовать import Star from '../images/star.svg';, а затем <img src={Star} alt="star" />, но получил ошибку ниже

ERROR in ./client/images/star.svg Module parse failed: C:\Users\muaz\Desktop\learn-redux - Copy\client\images\star.svg Unexpected token (1:0) You may need an appropriate loader to handle this file type.

А также попробовал src={require("../images/star.svg")} и получил тот же результат. Но я уже установил file-loader на зависимости dev:

Мой полный код devServe.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    },
    {
      test: /\.css$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    },
    {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        options: {},
    },
    ]
  }
};