Uploading images to React using Webpack

Question

I'm having trouble getting a simple image to display in a simple application using Webpack and React.

I read this and tried several different ways, but still get various errors or, at best, sometimes no errors, but also the image display.

Here is my React component:

import React from 'react';
import styles from '../css/main.css';

import Menu from './Menu';

const logo = require('./images/PIVX_Planet_1a_239x83.png');

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {test: 'foo'};
  }
  render() {
    return (
      <div>
        <div id='container'></div>

        <div className={styles.logo}>
          <img src={logo}/>
        </div>
        <div>
          <Menu/>
        </div>
      </div>
    );
  }
}

Here is my webpack configurator:

...
module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.(jpg|png|svg)$/,
      loader: 'url-loader',
      options: {
        limit: 25000,
      },
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }]
  }
...

With this, get the error from webpack in the console:

A mistake in. /app/components/App.js Module not found: Error: Cannot resolve "file" or "directory". / images / PIVX _Planet_1a_239x83.png in / Users / mac / _DEV / _LAB / PIVX / PIVX-Planet-2 / app / components @. / app / components / App.js 67: 11-56

babel-plugin-transform-react-jsx-img-import (https://www.npmjs.com/package/babel-plugin-transform-react-jsx-img-import)

:

<div className={styles.logo}>
  <img src="./images/PIVX_Planet_1a_239x83.png"/>
</div>

, .

.

:

• • • App.js
  • • PIVX_Planet_1a_239x83.png
  • index.html ...

?

Answer 1

, ,

const logo = require('../images/PIVX_Planet_1a_239x83.png');

app, components, image

, loaders

Answer 2

:

let logo = require('../images/PIVX_Planet_1a_239x83.png');

let ,