添加背景图像与 bootstrap 进行反应

Question

如果有人可以帮助我解决这个问题。我无法在react.js 中向导航栏添加背景图像，如果有人可以帮助我，我将不胜感激。

import React, { Component } from 'react';
import Navbar from './Navbar';
import './navbar.css';

    class App extends Component {
  render() {
    return (
      <div className="logo">

      <div>
        <Navbar/>
      </div>


      </div>
    );
  }
}

export default App;

<--Style--!>
.logo{

    background-image: url('./header.jpg');

}

Answer 1

首先你必须导入你想要添加的图片

import LogoImage from './header.jpg';

var sectionStyle = {
   backgroundImage: `url(${LogoImage})`
}

 class App extends Component {
  render() {
    return (

      <div style={sectionStyle}>

      <div>
        <Navbar/>
      </div>


      </div>
    );
  }
};

我希望这会给你一个关于如何解决这个问题的想法