能否用react-query实现图片加载Suspense？是否有更优方案？

能不能实现？ #

完全可以。React Query从v3版本开始支持Suspense模式，只要在useQuery的配置中开启suspense: true，就能配合React的<Suspense>组件实现图片加载的等待状态。

示例代码的合理性分析 #

你给出的代码思路是成立的：通过Image对象预加载图片，加载完成后返回原src，这样渲染<img>时直接用这个已缓存的src，不会触发二次加载。但存在几个明显的问题：

• QueryKey设计不合理：用固定字符串'src'作为queryKey会导致所有图片共用同一个缓存条目，不同图片加载时会互相覆盖，引发逻辑错误。应该把实际的图片地址作为queryKey的一部分，比如[src]。
• 错误处理缺失：代码里只在onerror时执行reject，但没有在组件层面处理加载失败的情况，一旦图片加载出错，会直接抛出未捕获的错误。
• 未启用Suspense模式：示例代码里没有添加suspense: true配置，默认不会触发Suspense的等待逻辑。

更优的实现方法 #

可以封装一个专门的自定义Hook，整合Suspense支持、合理缓存和错误处理：

import { useQuery } from '@tanstack/react-query';

// 自定义Hook：预加载图片并支持Suspense
const useImagePreload = (src) => {
  return useQuery({
    queryKey: ['image', src], // 用图片地址作为缓存键，确保每个图片独立缓存
    queryFn: () => new Promise((resolve, reject) => {
      const image = new Image();
      image.src = src;
      image.onload = () => resolve(src);
      image.onerror = () => reject(new Error(`加载图片失败: ${src}`));
    }),
    suspense: true, // 启用Suspense模式
    staleTime: Infinity, // 图片加载完成后永久缓存，除非主动失效
    retry: 2, // 加载失败时自动重试2次
  });
};

// 图片组件示例
const ImageWithSuspense = ({ src, alt }) => {
  const { data: imageSrc } = useImagePreload(src);
  
  return <img src={imageSrc} alt={alt} />;
};

// 父组件中用Suspense包裹
const ParentComponent = () => {
  return (
    <Suspense fallback={<div>图片加载中...</div>}>
      <ImageWithSuspense src="https://example.com/image.jpg" alt="示例图片" />
    </Suspense>
  );
};

额外优化建议：

• 添加错误边界：给组件套上错误边界，捕获图片加载失败的错误，展示友好的错误提示。
• 优化占位符：Suspense的fallback可以使用骨架屏或者低分辨率的模糊占位图，提升用户体验。
• 灵活缓存控制：如果图片存在更新可能，可以调整staleTime或者在图片更新时主动调用invalidateQueries清除对应缓存。

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