Building a Login Page using ReactJS and ChakraUI. Trying to use an image but it will not appear on the page. What am I doing wrong?

Question

Here is my code in the components/Login.jsx

import React from 'react';
import { HStack, Flex } from '@chakra-ui/react';
import  LoginLogo  from '../assets/Beer.jpg'
const Login = () => {
    return (
        <HStack w="full" h="100vh">
            <Flex w="full" h="full" borderRightWidth={1}>
                <image src={LoginLogo} />
            </Flex>
        </HStack>
    )
}

export default Login;

I have my App.js set up as such:

import React from 'react';
import { ChakraProvider, theme } from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import Login from './components/Login';


function App() {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeSwitcher justifySelf="flex-end" />
      <Login />
    </ChakraProvider>
  );
}

export default App;

When I run 'npm start' all I get is a blank page. I'm new to React and Chakra is their anything really obvious I'm missing?

Answer 1

You need to use <img src={LoginLogo}/> and not <image src={LoginLogo}/>

If you want to use Image component given by chakra you can check it here

import {Image} from "@chakra-ui/react"
import  LoginLogo  from '../assets/Beer.jpg'
function App(){
  return <div><Image
    src={LoginLogo}
  /></div>
}