反应如何将图像设置为导航栏的背景

Question

我正在使用 create-react-app 并有一个我想添加背景图像的导航栏。 我尝试了几种不同的方法，例如添加 backgroundImage 样式和添加图像标签，但无法使其正常工作。 我使用的图片是 a.jpg，是从图片库网站下载的。 我通过将图像拖入并将其添加到图像文件夹来将图像添加到我的项目中。

从我的 header（我称之为导航栏）文件到我的图像的当前路径是../../images/pexels-kai-pilger-1341279.jpg

这是我的 header 文件：

import React from 'react';
import { makeStyles } from '@material-ui/core';
import { ReactComponent as MenuLogo } from '../../images/menu-logo.svg';

const useStyles = makeStyles(theme => {
  return ({
    header: {
      backgroundColor: '#d9d9d9',
      boxShadow: '0rem 0rem 0rem 0.05rem #666666',
      padding: '0rem 1rem 0rem 1rem',
      position: 'relative',
      width: '100vw',
      height: 70,
      zIndex: '100',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      backgroundImage: "url('SpaceLogo')"
    },
    headerActive: {
        left: 352,
        backgroundColor: '#d9d9d9',
        boxShadow: '0rem 0rem 0rem 0.05rem #666666',
        padding: '0rem 1rem 0rem 1rem',
        position: 'relative',
        width: '81.7%',

        height: 70,
        zIndex: '100',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    menuLogo: {
      backgroundColor: '#d9d9d9',
      border: 'none',
      '&:hover': {
        cursor: 'pointer'
      }
    },
  });
});

function Header(props) {
  const { toggleMenu, isMenuOpen } = props;
  const classes = useStyles(props);

  return (
    <div className={ isMenuOpen ? classes.headerActive : classes.header } >
      <button 
        className={classes.menuLogo}
        onClick={() => toggleMenu()}>
        <MenuLogo /> 
      </button>
    </div>
  );
}

export default (Header);

我相信这是这个问题唯一需要的文件，但如果我需要添加更多信息，我可以更新。

如果我能获得有关如何设置此设置的帮助，那就太好了。

奖励问题：有没有办法让我选择图片的哪一部分在导航栏中可见？ 例如，图像是一个大正方形，但我的导航栏是一个细矩形。 我想使用图像的中间作为背景而不是顶部。

Answer 1

header: {
  backgroundColor: '#d9d9d9',
  boxShadow: '0rem 0rem 0rem 0.05rem #666666',
  padding: '0rem 1rem 0rem 1rem',
  position: 'relative',
  width: '100vw',
  height: 70,
  zIndex: '100',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  backgroundImage: `url(${SpaceLogo})`
},

这应该是工作