如何基于React框架中的路由动态更新背景图像

Question

我正在尝试更新基于各种路由选项的背景图像。但是，根本没有显示任何背景。

我尝试了内联样式，并确保我引用的目录是正确的。

最初，css只是通过改变html背景来设置背景，但我不能使其动态。

class App extends Component {
   constructor() {
    super();
    this.state = {
      'route': 'Home'
    }
  }

  onRouteChange = (route) => {
    this.setState({route: route});
  }

  render() {
    if (this.state.route === 'Home') {
      return (
        <div className='App home'>
          <div style={{display: 'flex', justifyContent: 'flex-end', backgroundColor: 'rgb(91,121,97, 0.5)'}}>
            <div style={{marginRight: 'auto'}}><Logo onRouteChange={this.onRouteChange}/></div>
            <Navigation onRouteChange={this.onRouteChange}/>
          </div>
            <SideBar/>
        </div>
      )
    } else {
      return(
        <div className='App theAnimalKingdom'>
         <div style={{display: 'flex', justifyContent: 'flex-end', backgroundColor: 'rgb(91,121,97, 0.5)'}}>
           <div style={{marginRight: 'auto'}}><Logo onRouteChange={this.onRouteChange}/></div>
           <Navigation onRouteChange={this.onRouteChange}/>
         </div>
        </div>
      )
    }
  }
}

export default App;

app.css如下所示。

div.app {
    height: 100%;
    width: 100%;
}

div.home {  
    background-image: url('./Images/cover.jpg') no-repeat center bottom fixed;
    background-size: 100% 100%;
}

div.theAnimalKingdom {  
    background-image: url('./Images/other.jpg') no-repeat center bottom fixed;
    background-size: 100% 100%;
}

如果this.status应更改为theAnimalKingdom，则背景应更改为other.jpg

Answer 1

对于background-image的CSS<url> 值，没有./something (“当前”文件夹的相对路径)这样的东西。

您可以使用相对URL，但它们是相对于CSS文件的(在build文件夹中，在webpack/typescript/...编译-如果使用create-react-app，则从public文件夹复制所有资源，但仅在实际导入时复制来自src的资源)。

Setting a backgroundImage With React Inline Styles可能更简单，但也可以将图像放到public文件夹中。