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>
    );
  }
};

我希望这会给您一个有关如何解决此问题的想法

Answer 2

我需要添加带有背景图片的搜索栏。我们可以使用Sematic UI来达到要求。请参考以下代码。

                <Form inline  >
                    <Form.Row className="align-items-center">
                        <Form.Control as="select" size="sm" custom>
                            <option>Location</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </Form.Control>
                        <FormControl id="inlineFormInputGroupUsername2" placeholder="Search for Restaurants or Cuisines" />
                        <Button type="submit" className="mb-2">
                            Submit
                    </Button>
                    </Form.Row>
                </Form>
            </div>

在App.css中添加以下内容。

.contact-background-image {
  background-image: url("https://img.food.com/img/upload/editorial/PACKAGE-COMFORT-FOOD/2016-12-23%20-%20Lasagna%20all%20day/four-lasagnes-16.jpg");
  padding: 50px 0 50px 0;
  height: 400px;
  background-size: 100% 
}

上述解决方案对我有用。

Answer 3

您不能将样式放入react.js组件中。您可以通过两种方式解决此问题

您可以将其放在navbar.css文件中

您可以像下面这样将其作为React inline CSS的

import React, { Component } from 'react';
import Navbar from './Navbar';
import './navbar.css';
import image from "./header.jpg";

class App extends Component {
 render() {
  return (
    <div className="logo" style={{backgroundImage: `url(${image}` }}>
     <div>
       <Navbar/>
     </div>
    </div>
  );
 }
}
export default App;

Answer 4

我建议创建一个单独的CSS文件并将其导入，然后使用className =！引用您的类名。

在引导程序中添加背景图像

4 个答案: