React如何实现页面每次刷新自动切换不同背景图片

实现核心逻辑非常直接，只需要在组件渲染时从预设的背景图数组里随机取一张，替换原来写死的单张背景路径即可，步骤如下：

• 提前定义存储所有背景图路径的数组，把需要用到的背景资源路径全部存入
• 组件初始化时生成合法的随机数组索引，取出对应的随机图片路径
• 将随机路径绑定到容器的backgroundImage样式上，可按需补充背景适配样式避免显示异常

修改后的完整代码如下：

// 存入所有需要切换的背景图路径
const bgImageList = [
  "back.jpg",
  "back2.jpg",
  "back3.jpg",
  "back4.jpg"
  // 按实际需求追加更多图片路径即可
];

function App() {
  // 生成0到数组长度-1范围的随机整数，作为选中图片的索引
  const randomIndex = Math.floor(Math.random() * bgImageList.length);
  const activeBg = bgImageList[randomIndex];

  return (
    <div 
      className="App" 
      style={{
        backgroundImage: `url("${activeBg}")`,
        // 以下为背景适配样式，可根据自身布局需求调整
        backgroundSize: "cover",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        minHeight: "100vh"
      }}
    >
      <div className='container'>
        <div className='container'>
          <Header/>  
          <Footer/>
        </div>
      </div>
    </div>
  );
}

注意事项 #

• 如果使用项目src目录下的本地图片资源，不要直接写字符串相对路径，需要先通过import导入图片变量，再把变量存入背景图数组，否则项目打包后会出现路径找不到的问题，示例：

  import back1 from './assets/back1.jpg';
  import back2 from './assets/back2.jpg';
  const bgImageList = [back1, back2];
  

• 上述逻辑会在每次App组件重新挂载（包含页面刷新、路由重挂载等场景）时重新随机选图，不需要额外加刷新监听事件。

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