使用ReactJS和ChakraUI构建登录页面.正在尝试使用图像，但该图像不会出现在页面上.我做错了什么

Question

这是我在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;

我的App.js设置如下：

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;

当我运行"npm-start"时，我得到的只是一张空白页。我是React和Chakra的新手，他们有什么明显的我缺少的东西吗？

Answer 1

您需要使用<img src={LoginLogo}/>而不是<image src={LoginLogo}/>

如果你想使用查克拉提供的Image成分，你可以在这里检查

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