reactjs - 在 React 中延迟加载图像

Question

我有一个Image接收图像名称的组件，并使用一些逻辑来确定资产文件夹的位置。

我的图像组件看起来像这样：

export default function Image({
  basename,
  fallbackBasename,
  onError,
  ...props
}) {
  const imageAssetsBaseUrl =
    path.extname(basename) === 'svg'
      ? '../../../assets/icons'
      : '../../../assets/images';

  const [hasError, setHasError] = useState(false);
  const handleError = (...args) => {
    setHasError(true);
    onError(...args);
  };

  const imageSource = React.lazy(() =>
    import(
      hasError
        ? `${imageAssetsBaseUrl}${fallbackBasename}`
        : `${imageAssetsBaseUrl}${basename}`
    ),
  );

  return (
    <React.Suspense fallback={<div>loading...</div>}>
      <img src={imageSource} onError={handleError} {...props} />
    </React.Suspense>
  );
}

我期望的是<div>loading...</div>在图像被延迟加载时被渲染，并且图像在加载后被正确渲染。

实际发生的情况是在资产的加载阶段没有渲染任何内容，并且每当加载最终发生时，我都会收到错误图像，因为img's 的来源是：[object Object].

标签： reactjswebpacklazy-loadingwebpack-file-loaderreact-suspense