Как отобразить lo go на компоненте AppBaract-admin?

Question

Простое приложение реакции-администратора. Пытаюсь вывести lo go. У меня есть название приложения и заполнитель для lo go, но нет изображения. Пробовал оба .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;

и компонент Admin в приложении. js:

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;

А вот как это выглядит, с lo go, заголовком приложения и заголовком страницы в середине панели приложения:

Не уверен, что это лучший способ сделать это, но он работает и имеет смысл для меня с моим нынешним пониманием.