React项目中Math.random切换图片src后DOM不显示图片问题求助

问题根源 #

直接使用document.getElementById修改DOM元素的src，绕开了React的状态管理机制。React依赖虚拟DOM与真实DOM的同步完成渲染，这种原生DOM操作会导致两者状态不一致——即便真实DOM的src已更新，React也不会触发正确的重新渲染流程，最终图片无法正常显示。

正确解决方法：用React状态管理图片路径 #

React的核心是状态驱动视图，应该通过更新组件状态来切换图片，而非直接操作DOM。以下是两种常见场景的实现代码：

场景1：图片放在src目录下（需导入）

import React, { useState } from 'react';
// 导入所有骰子图片
import face1 from './face1.png';
import face2 from './face2.png';
import face3 from './face3.png';
import face4 from './face4.png';
import face5 from './face5.png';
import face6 from './face6.png';

const faceImages = [face1, face2, face3, face4, face5, face6];

function DiceComponent() {
  // 用状态保存当前显示的图片
  const [currentFace, setCurrentFace] = useState(faceImages[0]);

  const handlePlay = () => {
    // 生成0-5的随机索引，对应6张图片
    const randomIndex = Math.floor(Math.random() * 6);
    setCurrentFace(faceImages[randomIndex]);
  };

  return (
    <div>
      <img src={currentFace} alt="骰子" />
      <button onClick={handlePlay}>jouer</button>
    </div>
  );
}

export default DiceComponent;

场景2：图片放在public目录下（直接用根路径）

import React, { useState } from 'react';

function DiceComponent() {
  // 用状态保存当前骰子的数字（1-6）
  const [faceNumber, setFaceNumber] = useState(1);

  const handlePlay = () => {
    const randomNum = Math.floor(Math.random() * 6) + 1;
    setFaceNumber(randomNum);
  };

  return (
    <div>
      {/* 用public目录下的根路径拼接图片地址 */}
      <img src={`/face${faceNumber}.png`} alt={`骰子面${faceNumber}`} />
      <button onClick={handlePlay}>jouer</button>
    </div>
  );
}

export default DiceComponent;

关键说明 #

1. 状态驱动更新：点击按钮时更新状态，React会自动触发组件重新渲染，确保虚拟DOM与真实DOM同步，图片路径能被正确解析并加载。
2. 路径规则：
   • src目录下的图片必须通过import导入，否则Webpack等打包工具无法识别资源路径。
   • public目录下的图片可以直接使用根路径（以/开头）访问，无需导入。

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