如何在React中的渲染中显示本地图像以及对“ className”的引用

时间:2019-02-22 22:25:14

标签: reactjs dom

在我的render()中,我想显示“ 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文件中引用我的图像吗?

我应该在我的react.js代码底部添加

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

对此进行注释会使其他所有内容无法渲染。

0 个答案:

没有答案