如何在Chakra UI的TypeScript Web应用中添加带文字的背景图

背景图不显示（白屏）问题修复 #

你的Background组件存在两个核心问题：

• 资源路径错误：Next.js中public目录下的文件无需加/public/前缀，直接使用文件名即可，否则会导致资源找不到。
• 容器无高度：默认Box高度为0，即使设置背景也无法显示，需要设置全屏高度。

修改后的Background组件代码：

import { Box, Text } from "@chakra-ui/react";

const Background = () => {
  return (
    <Box
      backgroundImage="url('/background.png')"
      backgroundPosition="center"
      backgroundRepeat="no-repeat"
      backgroundSize="cover"
      minH="100vh"
      display="flex"
      alignItems="center"
      justifyContent="center"
    >
      <Text fontSize="xl" fontWeight="bold" color="white">This is my personal website.</Text>
    </Box>
  );
};

export default Background;

添加文本时的语法错误修复 #

报错Expected ',', got 'is'是JSX语法书写错误导致的，大概率是你误将Text元素写在了Box的属性列表中，而非作为子元素嵌套在Box标签内部。按照上面的代码示例，将Text正确放在Box的闭合标签内即可解决。

补充提示 #

• 确认background.png确实存放在项目的public目录下，与你的项目结构截图一致。
• 如果导航栏为固定定位，可给Background组件添加pt属性（如pt="10"），避免内容被导航栏遮挡。

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