React中修改body背景图片失败问题求助

你的代码有两个关键问题导致背景图片无法生效：

1. 错误使用JSX花括号语法
   在普通JavaScript代码中拼接字符串时，不需要用{}包裹变量——这是JSX语法专属的写法。你写的"url('" + {explosion} + "')"会把{explosion}当成对象来拼接，最终生成的URL格式完全错误。

2. 函数语法不完整
   你的Boom函数缺少闭合的}，语法错误会直接导致代码无法执行。

修正后的代码（两种写法任选） #

模板字符串写法（推荐）

import explosion from "./explosion.png";

function Boom(){
  document.getElementById("body").style.backgroundImage = `url(${explosion})`;
}

字符串拼接写法

import explosion from "./explosion.png";

function Boom(){
  document.getElementById("body").style.backgroundImage = "url('" + explosion + "')";
}

补充说明：React项目中通过import导入图片后，explosion变量已经是打包工具处理后的有效图片路径，直接使用即可，无需额外处理。

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