Question

我正在导入图像，并将其添加到我的React应用中，

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 / transformation / file / index.js：558         犯错         ^

SyntaxError：/ 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': '*' }
  }
};

Answer 1

通过更改 img 标签解决了问题：

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

将图像导入React应用程序后生成的问题

1 个答案: