页面刷新时Image组件出现异常缩放，如何修复并保留预期尺寸？

你遇到的问题是：页面刷新时，搭配fill和objectFit="contain"的Image组件出现异常缩放；去掉objectFit后缩放消失，但图片尺寸不符合预期。以下是几种可行的修复方案：

方案1：替换fill为自适应宽高，保留objectFit #

既然容器已经是flex居中布局，完全可以不用fill（绝对定位填充），直接让Image自适应容器尺寸，同时用objectFit保持图片比例：

<WifiWidgetContainer>
  <Image
    src={`/assets/wifi@5x.png`}
    alt="wifi_icon"
    objectFit="contain"
    style={{ width: '100%', height: '100%' }}
  />
</WifiWidgetContainer>

// 容器样式可以移除position:relative（不需要绝对定位依赖）
const WifiWidgetContainer = styled(Box)({
  width: 20,
  height: 20,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
});

这样Image会完全适配容器尺寸，objectFit="contain"保证图片按比例显示，同时避免了绝对定位在刷新时的布局计算偏差。

方案2：保留fill，给Image添加尺寸约束+容器溢出隐藏 #

如果必须用fill，可以给容器加上overflow: hidden，同时给Image明确设置和容器一致的宽高，确保刷新时尺寸计算同步：

<WifiWidgetContainer>
  <Image
    src={`/assets/wifi@5x.png`}
    alt="wifi_icon"
    objectFit="contain"
    fill
    width={20}
    height={20}
  />
</WifiWidgetContainer>

const WifiWidgetContainer = styled(Box)({
  width: 20,
  height: 20,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  position: "relative",
  overflow: "hidden", // 防止图片溢出容器
});

方案3：添加图片加载状态，避免刷新时的视觉跳动 #

如果是图片加载延迟导致的缩放跳动，可以给Image加个加载过渡效果，加载完成后再显示：

import { useState } from 'react';

// ...

const [isLoaded, setIsLoaded] = useState(false);

<WifiWidgetContainer>
  <Image
    src={`/assets/wifi@5x.png`}
    alt="wifi_icon"
    objectFit="contain"
    fill
    onLoad={() => setIsLoaded(true)}
    style={{ 
      opacity: isLoaded ? 1 : 0,
      transition: 'opacity 0.2s ease-in-out'
    }}
  />
</WifiWidgetContainer>

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