时间戳

首页 > 解决方案 > 添加背景图像以与引导程序反应

css - 添加背景图像以与引导程序反应

问题描述

如果有人可以帮我解决这个问题。我无法在 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');

}

标签： cssreactjs

解决方案

首先，您必须导入要添加的图片

import LogoImage from './header.jpg';

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

 class App extends Component {
  render() {
    return (

      <div style={sectionStyle}>

      <div>
        <Navbar/>
      </div>


      </div>
    );
  }
};

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

推荐阅读