SOLVED - blank react page when trying to render an image-CodePudding

I am getting a blank react page when trying to render an image. I am using the @material-ui/core package and it installed correctly.

Here is the code I am using.

Any help would be appreciated.

Thanks!

Here is the code:

import React from 'react';
import { Container, AppBar, Typography, Grow, Grid } from '@material-ui/core';
import memories from './images/memories.png';

const App = () => {
    return (
        <Container maxWidth="lg">
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Memories</Typography>
                <img src={memories} alt ="memories" heigth="60"/>
            </AppBar>
        </Container>
       
    );
}

export default App;

Here is what I am getting in the debugging console:

SyntaxError: Cannot use import statement outside a module at compileFunction (vm:360:18) at wrapSafe (internal/modules/cjs/loader:1088:15) at Module._compile (internal/modules/cjs/loader:1123:27) at Module._extensions..js (internal/modules/cjs/loader:1213:10) at Module.load (internal/modules/cjs/loader:1037:32) at Module._load (internal/modules/cjs/loader:878:12) at executeUserEntryPoint (internal/modules/run_main:81:12) at (internal/main/run_main_module:23:47)

I tried to uninstall and reinstall the material-ui package, checked the syntax and made sure the "memories.png" image is in the right location.

CodePudding user response：

You are importing components incorrectly. According to the documentation of MUI you have to import a Container from @mui/material/Container for example. Probably you are seeing errors about this in the React logs as well(?) Check out the docs for each component, they all have code snippets that show how to import.

CodePudding user response：

here is the updated code using import from '@mui/material';

import React from 'react';
import { Container } from '@mui/material';
import { AppBar } from '@mui/material';
import { Typography } from '@mui/material';

import memories from './images/memories.png';

const App = () => {
    return (
        <Container maxwidth="lg">
            <AppBar position="static" color='inherit'>
                <Typography variant="h2" align='center'>Memories</Typography>
                <img src={memories} alt='memories' height="60"/>
            </AppBar>
        </Container>
       
    );
}

export default App;

however I am still getting a blank react page and the same logs in my console: