如何在react-admin的AppBar组件上显示徽标？

Question

简单的react-admin应用。尝试显示徽标。我有应用程序标题和徽标的占位符，但没有图片。尝试了.svg和.png。外观如下：

这是自定义AppBar组件：

const CustomAppBar = props => {
  const classes = useStyles();
  return (
    <AppBar {...props} color='secondary' >
      <Toolbar>
        {/* <img src="./images/g3tools_orange_logo_only copy.png" alt="logo" className={classes.logo} /> */}
        <img src='/images/g3tools-blue-windows-icon.svg' alt="logo" className={classes.logo} />
      </Toolbar>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
      >g3tools Admin</Typography> ...

和自定义布局组件：

import React from 'react';
import { Layout } from 'react-admin';
import CustomAppBar from './CustomAppBar';

const CustomLayout = (props) => <Layout {...props} appBar={CustomAppBar} />;

export default CustomLayout;

和app.js中的Admin组件：

const App = () => (
  <Admin
    layout={CustomLayout}
    // title={<AppTitle />}
    dashboard={Dashboard}
    authProvider={authProvider}
    dataProvider={dataProvider} >
    {/* <Title title="g3tools Admin" /> */}
    <Resource
      name="items" ...

提前感谢。

Answer 1

关键是首先导入.png文件，然后将其用作花括号中的图像源，引用导入的对象。这是整个自定义应用栏组件：

import React from 'react';
import { AppBar } from 'react-admin';
import Typography from '@material-ui/core/Typography';
import Toolbar from '@material-ui/core/Toolbar';
import { makeStyles } from '@material-ui/core/styles';

import logo from './images/g3tools-orange-64x64-lighter.png';

const useStyles = makeStyles({
  title: {
    flex: 1,
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    marginLeft: -10
  },
  spacer: {
    flex: 1,
  },
  logo: {
    maxWidth: "40px",
    marginLeft: -35
  },
});

const CustomAppBar = props => {
  const classes = useStyles();
  return (
    <AppBar {...props} color='secondary' >
      <Toolbar>
        <img src={logo} alt="logo" className={classes.logo} />
      </Toolbar>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
      >g3tools Admin</Typography>
      <Typography
        variant="h6"
        color="inherit"
        className={classes.title}
        id="react-admin-title"
      />
    </AppBar >
  );
};

export default CustomAppBar;

不确定这是否是最好的方法，但是根据我目前的理解，这对我来说很有意义。