使用ReactJS与ChakraUI构建登录页时图片不显示且页面空白

1. 图片标签错误（核心问题） #

React中需使用标准HTML图片标签<img>，而非<image>，这是导致图片不显示、页面空白的关键原因。

2. 推荐使用Chakra UI的Image组件 #

既然基于Chakra UI开发，建议使用它提供的Image组件，自带响应式与样式支持，步骤如下：

• 先导入组件：

import { HStack, Flex, Image } from '@chakra-ui/react';

• 替换原错误标签：

<Image src={LoginLogo} alt="登录logo" />

3. 资源路径校验 #

确保../assets/Beer.jpg路径正确：

• assets文件夹需与components文件夹同级，且位于src目录下
• 图片文件名大小写需与实际文件完全一致（比如Beer.jpg不能写成beer.jpg）

4. 布局简化（可选） #

原代码中HStack仅包裹单个Flex，可简化嵌套结构，避免布局冗余：

const Login = () => {
    return (
        <Flex w="full" h="100vh" borderRightWidth={1}>
            <Image src={LoginLogo} alt="登录logo" objectFit="cover" w="full" h="full" />
        </Flex>
    )
}

5. 排查其他组件影响 #

如果调整后仍为空白，可临时注释掉ColorModeSwitcher组件，测试Login组件是否正常渲染，排查该组件是否存在导出错误或依赖缺失问题。

内容的提问来源于stack exchange，提问作者tokugawa