时间戳

首页 > 解决方案 > 如何在反应惰性后备中使用图像

reactjs - 如何在反应惰性后备中使用图像

问题描述

我想创建一个带有图像的加载屏幕

Router.js 文件

const Home = lazy(() => import("../home/home"));
import { LoadingScreen } from "../_components/LoadingScreen";

<Suspense fallback={<LoadingScreen />}>
        <Router history={history}>
          <Switch>
            <Route exact path="/" component={Home} />
          </Switch>
        </Router>
</Suspense>

加载屏幕.js

import React from "react";

export function LoadingScreen() {
  return (   
    <h1 id="testst">successfull</h1>
  );
}

问题是 - 当我只是导出文本时它会显示它，但是当我导出<img>而不是显示图像时它会显示一个空白页面，即使我在加载过程中设法检查页面我什至看不到<img>源代码中的标签

 import React from "react";

    export function LoadingScreen() {
      return (   
       <img src="/public/images/site-logo/main-black.png"></img>
      );
    }

在此处输入图像描述

上面的快照显示了来自 chrome 控制台的检查代码，这里我看不到 img 标签

如何在加载屏幕中使用图像，我做错了什么我也尝试导入 css 出现同样的问题

标签： reactjs

解决方案

图像仍在加载，但数据加载速度很快，您无法将图像视为后备...

因此出于调试目的，我们可以像这样在惰性主页周围设置超时：

// const HomePage = lazy(() => import("../HomePage/HomePage"))
const HomePage = lazy(() => {
  return new Promise(resolve => setTimeout(resolve, 1000)).then(
    () => import("../HomePage/HomePage")
  );
});

因此，主页将需要 1 秒的时间来加载，与此同时，您将看到图像作为后备

推荐阅读