Btukfyl

I'm importing images and add it to my react app like this:

import housePhoto from '../../images/photo/my-house1.png';



class House extends Component {

  constructor(props) {

    super(props);

  }



  render() {

    return (

 <a href='#'>

   <img src={housePhoto} alt=''/>

 </a>

)};

but when I do

npm run nodemon

I have an issue in console:

/home/jack/***/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^

SyntaxError: /home/jack/Документы/*-test/front/src/images/***.png:
Unexpected character '�' (1:0)

How can I fix it?
My webpack.config.js
global.Promise = require('bluebird');

const webpack            = require('webpack');

const path               = require('path');

const ExtractTextPlugin  = require('extract-text-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');



const publicPath         = 'http://localhost:8050/public/assets';

const cssName            = process.env.NODE_ENV === 'production' ? 'styles-[hash].css' : 'styles.css';

const jsName             = process.env.NODE_ENV === 'production' ? 'bundle-[hash].js' : 'bundle.js';



const plugins = [

  new webpack.DefinePlugin({

    'process.env': {

      BROWSER:  JSON.stringify(true),

      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')

    }

  }),

  new ExtractTextPlugin(cssName)

];



if (process.env.NODE_ENV === 'production') {

  plugins.push(

        new CleanWebpackPlugin([ 'public/assets/' ], {

          root: __dirname,

          verbose: true,

          dry: false

        })

    );

  plugins.push(new webpack.optimize.DedupePlugin());

  plugins.push(new webpack.optimize.OccurenceOrderPlugin());

}



module.exports = {

  entry: ['babel-polyfill', './src/client.js'],

  debug: process.env.NODE_ENV !== 'production',

  resolve: {

    root:               path.join(__dirname, 'src'),

    modulesDirectories: [ 'node_modules' ],

    extensions:         ['', '.js', '.jsx']

  },

  plugins,

  output: {

    path: `${__dirname}/public/assets/`,

    filename: jsName,

    publicPath

  },

  module: {

    loaders: [

      {

        test: /.css$/,

        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')

      },

      {

        test: /.less$/,

        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!less-loader')

      },

            { test: /.gif$/, loader: 'url-loader?limit=10000&mimetype=image/gif' },

            { test: /.jpg$/, loader: 'url-loader?limit=10000&mimetype=image/jpg' },

            { test: /.png$/, loader: 'url-loader?limit=10000&mimetype=image/png' },

            { test: /.svg/, loader: 'url-loader?limit=26000&mimetype=image/svg+xml' },

            { test: /.(woff|woff2|ttf|eot)/, loader: 'url-loader?limit=1' },

      {

        test: /.jsx?$/, loader: process.env.NODE_ENV !== 'production' ? 'react-hot!babel!eslint-loader' : 'babel',

        exclude: [/node_modules/, /public/] },

            { test: /.json$/, loader: 'json-loader' }

    ]

  },

  eslint: { configFile: '.eslintrc' },

  devtool: process.env.NODE_ENV !== 'production' ? 'source-map' : null,

  devServer: {

    headers: { 'Access-Control-Allow-Origin': '*' }

  }

};

Problem solved by changing img tag:

<img src={require('../../images/photo/my-house1.png')} />