使用Tailwind CSS时，窗口缩放后图片无法显示怎么解决？

1. 修复初始高度异常问题 #

初始渲染时width可能为0或undefined，导致bannerHeight被设为0，容器高度为0直接隐藏图片。可以通过初始化时获取窗口宽度或过滤无效width值解决：

const { width } = useWindowSize();
// 初始化时根据当前窗口宽度设置初始高度
const initialWidth = typeof window !== 'undefined' ? window.innerWidth : 1280;
const [bannerHeight, setBannerHeight] = useState(initialWidth > 1280 ? 560 : (initialWidth * 560)/1280);

useEffect(() => {
  if (!width) return; // 忽略无效的width值
  let height = width > 1280 ? 560 : (width * 560) / 1280;
  setBannerHeight(height);
}, [width]);

2. 检查sliderId状态正确性 #

确保sliderId的初始值与slider数组的索引起始值一致（通常为0），否则key === sliderId的条件永远不成立，图片不会渲染：

// 初始化sliderId为0，匹配数组默认索引
const [sliderId, setSliderId] = useState(0);

3. 验证useWindowSize自定义hook #

确认hook能正确监听窗口缩放并返回有效宽度，以下是标准实现参考：

function useWindowSize() {
  const [size, setSize] = useState({
    width: typeof window !== 'undefined' ? window.innerWidth : 1280,
    height: typeof window !== 'undefined' ? window.innerHeight : 0,
  });

  useEffect(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

4. 简化高度计算逻辑（推荐） #

无需用状态管理高度，直接在JSX中动态计算，避免状态更新延迟：

<div
  className={`rounded-lg overflow-hidden flex md:mx-16 relative`}
  style={{ height: `${width > 1280 ? 560 : (width * 560)/1280}px` }}
>
  {slider.map((item, key) => (
    <div className="w-full h-full absolute left-0 top-0" key={key}>
      {key === sliderId && (
        <img src={item.image} className="w-full h-full object-cover" alt={item.title || '轮播图'} />
      )}
    </div>
  ))}
</div>

这里给图片和父容器加上h-full，确保图片能填满容器高度。

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