javascript - 你如何将背景图像添加到 react 组件中的div？

Question

我正在关注 https://www.youtube.com/watch?v=QZcNGfcn-oo&t=572sa 上的“使用 React 构建 rpg 游戏”教程并简单地输入演示者所做的事情。

我正在尝试向下面的 div 添加背景图像。为什么我总是在 backgroundimage 收到意外的标记错误？从 './Unicorn.png' 导入独 Angular 兽；

class Player extends React.Component {
    render() {
        return (<div
         style={{
              position:'absolute',
              top: props.position[1],
              left: props.position[0],
              backgroundImage: 'url('${Unicorn})',
              backgroundPosition: '0 0',
              width:'32px',
              height:'32px'
         }}
      />
      )
    }
    
    mapStateToProps=(state)=>{
        return{
            ...state.Player,
        }
    }

}

Answer 1

用波浪键 ` 替换单引号:(位于 ESC 键下方)

backgroundImage: `url(${Unicorn})`,

或者，引用:

backgroundImage: 'url('+Unicorn+')',

---

另外，一定要使用backgroundRepeat，没有它，背景会默认重复:(顺便说一句，由于它的宽度和高度限制，你可能看不到重复的背景)

backgroundRepeat: 'no-repeat',