react-admin的AppBar组件如何显示logo？

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 中的管理组件：

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

提前致谢。

Answer 1

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

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;

这是它的外观，带有徽标、应用标题和应用栏中间的页面标题：

不确定这是否是最好的方法，但根据我目前的理解，它有效并且对我有意义。

react-admin的AppBar组件如何显示logo？

How to display a logo on the AppBar component of react-admin?

svg

reactjs

react-admin