webpack - 将图像链接传递到组件时，出现“意外字符”错误（Webpack、Babel）

Question

在我的 React 应用程序中，我可以在任何地方很好地导入图像，除了我尝试将图像路径传递给组件的一个地方。

const Component = ({ imgLink }) => {

const img = imgLink ? (<img src={imgLink} alt="whatever"/>) : ''

return (<div>
            {img}
        </div>)
}

然后在我的父组件中：

import nicePicture from '../../assets/img/global/nice-picture.jpg'

const ParentComponent = () => {

    const img = imgLink ? (<img src={imgLink} alt="whatever"/>) : ''

    return (<Component imgLink={nicePicture} />)
    //I have also tried passing this is as a string (i.e.'../../assets/img/global/nice-picture.jpg'), 
    //but then the image breaks
}   

当我尝试构建它时，我得到了

/Users/me/projects/app/client/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/index.js:590
  throw err;
  ^

SyntaxError: /Users/me/projects/app/client/src/assets/img/global/nice-picture.jpg: Unexpected character '�' (1:0)
> 1 | ���� 

这是我的 Webpack 图像加载器配置：

{
    test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    exclude: /\/favicon.ico$/,
    loader: 'file',
    query: {
      name: 'static/media/[name].[hash:8].[ext]'
    }
  }

知道是什么原因造成的吗？

编辑：这些也是我的 babel 设置：

 loaders: [
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.prod')//this file is below
  }

]

module.exports = {
 babelrc: false,
 presets: [
  require.resolve('babel-preset-latest'),
  require.resolve('babel-preset-react')
 ],
 plugins: [
   require.resolve('babel-plugin-transform-function-bind'),
   require.resolve('babel-plugin-transform-class-properties'),
   require.resolve('babel-plugin-transform-object-rest-spread'),
  [require.resolve('babel-plugin-transform-regenerator'), {
    async: false
  }],
  [require.resolve('babel-plugin-transform-runtime'), {
     helpers: false,
     polyfill: false,
     regenerator: true,
     moduleName: path.dirname(require.resolve('babel-runtime/package'))
   }],
  ]
}