求助：为Chakra Provider的body设置背景图片的代码无法生效

问题根源 #

1. backgroundImage格式错误：Chakra UI中设置背景图片必须用url()包裹路径字符串，直接写路径无法被识别
2. 资源路径标识错误：public目录下的静态资源无需@public前缀，直接使用根路径即可（以Next.js/Vite这类框架为例）

修正后的代码 #

const styles = {
  global: (props: GlobalStyleProps) => ({
    body: {
      fontFamily: 'body',
      color: mode('gray.800', 'whiteAlpha.900')(props),
      backgroundImage: mode('url(/unknown.png)', 'url(/unknown.png)')(props),
      // 可选：添加以下属性优化背景显示效果
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      lineHeight: 'base',
    },
  }),
}

const theme = extendTheme({ styles });

额外说明 #

• 如果你的项目不是Next.js/Vite，需根据框架的静态资源规则调整路径，确保路径能正确指向图片文件
• 添加backgroundSize、backgroundRepeat等属性可以避免图片拉伸、重复显示等问题，让背景效果更符合预期

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