反應如何將圖像設置為導航欄的背景

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})`
},

這應該是工作