Dynamically loading images in React

Question

So I am having trouble loading images in my React code. I set up dummy data to load images locally.

My path is public/images/nyc.jpg

In my React file I have tried to wrap it with quotes like I normally do in mustaches but it doesn't work with react.

<img src='/public/images{this.props.image}' />

but it wouldn't work. Is there a way I can load the data dynamically or tell webpack for a specific jsx attributes that load from public/images path?

import React, { Component } from 'react'
import styles from './styles'

class Book extends Component {
  render(){
    const style = styles.book

    return (
      <div style={styles.container}>
        <h2 style={styles.header}>
          <div>
            <img src={this.props.image} />
          </div>
          <div>
            <span>{this.props.book.title}</span><br />

          </div>
          <a style={styles.title} href='#'>{this.props.book.author}</a>
        </h2>
        <span>{this.props.book.genre}</span><br />
        <span>{this.props.book.publishDate}</span><br />
      </div>
    )
  }
}


export default Book

my webpack code

var webpack = require('webpack')
var path = require('path')

module.exports = {

  entry: {
    app: './src/app.js'
  },
  output: {
    filename: 'public/build/bundle.js',
    sourceMapFilename: 'public/build/bundle.map'
  },
  devtool: '#source-map',
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(nodle_modules)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  }
}