Dynamically loading images in React [duplicate]

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'] } } ] } }