Как отобразить локальное изображение в рендере в React вместе с моими ссылками на "className"

Question

В моем рендере () я хочу отобразить "pony.jpg".Тем не менее, я попытался использовать <img src={require('pony.png')} />, но он не работает с остальной частью моего кода.Весь возврат в моей функции рендеринга выглядит как

return (
  React.DOM.div( {className:"snake-game"}, [
    React.DOM.h1( {className:"snake-score"}, ["Length: ", this.state.snake.length]),
    React.DOM.div(
      {ref:"board",
      className:'snake-board' + (this.state.gameOver ? ' game-over' : ''),
      tabIndex:0,
      onBlur:this._pause,
      onFocus:this._resume,
      onKeyDown:this._handleKey,
      style:{width: numCols * cellSize, height: numRows * cellSize}},
      cells
    ),
    React.DOM.div( {className:"snake-controls"}, [
      this.state.paused ? React.DOM.button( {onClick:this._resume}, "Resume") : null,
      this.state.gameOver ? React.DOM.button( {onClick:this._reset}, "New Game") : null
    ]),
    React.DOM.div({className:"pony"},[
      <img src={require('pony.png')} />
    ])
  ])


);

Должен ли я каким-то образом ссылаться на мое изображение в моем css-файле?

Я должен добавить это в нижней части моего кодаact.jsУ меня есть

React.renderComponent(SnakeGame(null, null ), document.body);

Комментирование этого делает все остальное невыносимым.