将图像背景添加到 React Typescript 中的按钮组件

Question

我在使用 react typescript 的 React 项目中使用材质 UI 库。 我希望这个按钮有一张图片作为背景。 但是，该按钮不接受 src 或 imageURL 并返回打字稿错误，并且 css 样式背景也不显示图片。 这是我的代码：

const noticon = require ('./../../images/nicon.png') 
const Avatarpic = require ('./../../images/Avatar.png') 

const ExampleButton = ({
  // useOpenState hook handlers
  handleToggle, handleClose, handleOpen, setOpenState, isOpen
}: DropdownButtonProps) => (
  <Button onClick={handleToggle} style={{backgroundImage: '{noticon}'}} square>
  </Button>
)
function Navbar () {
  return (
    <>
      <TopBar style={{ backgroundColor: '#e6edec' }}>
        <TopBarSection>
          <TopBarTitle>
            <Avatar imgUrl={Avatarpic} name='حسین ساداتی پور' style={{ fontFamily: 'IranSans', fontSize: '20px' }} />
          </TopBarTitle>
          <Dropdown ButtonComponent={ExampleButton}>
          <DropdownItem>Item to click</DropdownItem>
        </Dropdown>
        </TopBarSection>
        {// <TopBarSection>
          // burger menu Icon
          // </TopBarSection>
        }
      </TopBar>
      <section
        style={{
          padding: 50,
          textAlign: 'center'
        }}
      >
      Some content
      </section>
    </>
  )
}

export default Navbar

Answer 1

你需要这样做：

<Button onClick={handleToggle} style={{backgroundImage: `url(${noticon})`}} square>