Проблема после сборки с импортом изображения в приложение React - PullRequest
Новая
       17

Проблема после сборки с импортом изображения в приложение React

0 голосов
/ 29 ноября 2018

Я импортирую изображения и добавляю их в свое приложение реакции следующим образом: 

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>
)};

, но когда я делаю

npm, запускаем nodemon

У меня проблема в консоли:

/ home / jack / *** / node_modules / babel-register / node_modules / babel-core / lib / translation / file / index.js: 558бросить ошибку;^

Синтаксическая ошибка: /home/jack/Документы/*-test/front/src/images/***.png: неожиданный символ '�' (1: 0)

Как я могу это исправить? Мой 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': '*' }
  }
};

1 Ответ

0 голосов
/ 29 ноября 2018

Проблема решена путем изменения img тега: 

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