尝试更改img src。
从

{isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}

到这个

{isOpeningScreenVisible && <img src={OpeningScreen.src} className="image" />}

我已经测试了你的代码，它工作正常.试试这些：

• 检查你的图像路径并且确信它是正确的.
• 检查并查看控制台中是否有任何错误，并修复所有错误。
• 也许这载入时间是花费更多的时间超过5000ms.尝试10000ms为显示这图象.

您可以更新代码以使用本机事件，这样就不必重新发明轮子。
我会怎么做：

import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';

function ProgressComponent() {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
      }}
    >
        <img
            src={OpeningScreen}
            alt="opening screen"
            onLoad={e => {
                console.log("init event")
                setTimeout(() => (e.target as HTMLImageElement).remove(), 5000)
            }}
        />
    </div>
  );
}

export default ProgressComponent;

无论如何，这不是最好的方法，你能做的最好的就是使用css过渡来动画化一个开始的屏幕

function App() {
  const [loading, setLoading] = useState(false);
  document.onreadystatechange = function () {
    if (document.readyState !== "complete") {
      setLoading(true);
    } else if (document.readyState === "complete") {
      setTimeout(() => {
        setLoading(false);
      }, 5000);
    }
  };
  return (
    <div style={{ background: "black" }}>
      {loading && (
        <div id="loadingScreen">
         <img src={OpeningScreen} className="image" />
        </div>
      )}
      {!loading && (
        <div className="App" id="app"></div>
    </div>

试试这个，它应该可以工作，因为它仍然在我的一个项目中工作

基本的想法是<img src={openingScreen}/>将在屏幕上，直到React构建文件加载到网站上。添加<div className="App" id="app"></div>内的一切，一旦他们加载的图像将褪色。