0

我正在做出反应，next.js 应用程序，我在其上显示各种图像： 在此处输入图像描述

用户单击左侧列表中的项目，并在右侧获得三个图像。图像基于 next.js Image 组件显示：

            <Image
          src={visualizationData[0]}
          quality={50}
          alt="Zdjęcie oryginalne"
          width={600}
          height={600}
        />

WherevisualizationData是一个变量，它使用 State Hook 并返回 3 个 url 到用户想要显示的照片：

const [visualizationData, setVisualizationData] = useState(getVisualizationData(props.history.model.name, props.history.dataLists[0].replace('img/', '')));

所以它返回如下内容： 在此处输入图像描述

一切正常，但速度很慢，因为后端需要将 .tif 照片转换为 .jpg 并且大约需要 3 秒。我想在这 3 秒内显示一个微调器或类似于微调器的东西，而不是让用户看到旧的可视化。

怎么做？我不知道如何检查照片是否已加载，因为我只是将 url 传递给srcImage 组件的 prop。

这是一个代码getVisualizationData(modelName, pathAndPhotoName)：

    export function getVisualizationData(modelName, pathAndPhotoName) {
  const photoName = pathAndPhotoName.split('/').slice(-1)[0];
  const datasetPath = pathAndPhotoName.replace(`/${photoName}`, '');
  const visualizationData = [
    `${backendUrl}download/datasets/${datasetPath}/image/${photoName}`,
    `${backendUrl}download/datasets/${datasetPath}/mask/${photoName}`,
    `${backendUrl}download/models/${modelName}/Predictions/1/${photoName}`];
  return visualizationData;
}

它正在将路径转换为照片并将其返回到数组中。

4

1 回答 1

0

您可以创建一个 isLoading 布尔值。如果 isLoading 为真，则显示 Spinner。如果没有，则数据已被提取，您可以停止显示微调器并开始显示图片。

请注意，我没有关于 getVisualizationData 究竟返回什么的足够信息。但基本上，它应该返回一个用获取的值解析的 Promise。所以看看这段代码，得到想法并应用它。

  const [isLoading, setIsLoading] = useState(false);
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
 
      const result = await getVisualizationData(props.history.model.name, props.history.dataLists[0].replace('img/', '')); //Please check this line    
      setVisualizationData(result);
      setIsLoading(false);
    };
    fetchData();
  }, []);

然后在您的组件中，您可以在 isLoading 为 true 时渲染微调器。当它为假时，您将渲染您想要显示的内容：

return(
{isLoading ? (
        <SpinnerComponent />
      ) : (
        <div>
          //Render here your pictures
        </div>
      )}
)
于 2021-05-26T08:56:28.987 回答