从本地存储导入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：

我完整的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: {},
    },
    ]
  }
};