React中无法将SVG设为div背景图的问题求助

给你几个直接的排查和解决方向：

1. 先检查div是否设置了宽高 #

background-image不会自动撑开元素，如果div没有内容也没指定宽高，元素高度会是0，自然看不到背景图。给div加上尺寸试试：

return (
  <div
    style={{
      backgroundImage: `url(${Confetti})`,
      width: '100%',
      height: '500px', // 也可以设为100vh之类的适配值
      backgroundSize: 'cover', // 可选，让背景图适配元素大小
    }}
  >
    {children}
  </div>
);

2. 调整svg-url-loader的配置 #

svg-url-loader默认会根据文件大小决定返回base64编码还是文件URL，文件URL的路径处理偶尔会出问题。强制转成base64编码试试：
修改Webpack配置：

{
  test: /\.svg$/,
  use: {
    loader: 'svg-url-loader',
    options: {
      encoding: 'base64', // 强制将SVG转为base64字符串
      limit: 0 // 忽略文件大小阈值，全部用base64
    }
  }
}

3. 确认TypeScript的SVG类型声明（使用TS时） #

如果用TypeScript，可能缺少SVG文件的类型声明，导致导入的Confetti类型异常，拼接时出错。在项目根目录创建typings.d.ts文件，添加：

declare module '*.svg' {
  const content: string;
  export default content;
}

确保导入的SVG被识别为字符串类型，能正确拼入backgroundImage。

4. 给url中的路径添加引号 #

部分特殊字符可能导致URL解析失败，试试给${Confetti}套上双引号：

backgroundImage: `url("${Confetti}")`,

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