React中窗口尺寸变化时切换图片：三元运算符尝试无效求助

安全阿岳

2026-7-14

React窗口尺寸变化切换图片的修复方案

你写的代码有几个问题导致没生效，下面是修正后的实现：

问题点

未导入桌面端的cclogo图片，代码里使用了该变量但未声明导入
获取窗口宽度应该用window.innerWidth，而非window.width
三元运算符里错误地用{cclogo}这种对象形式，img的src需要直接传递图片路径变量
未监听窗口尺寸变化事件，窗口调整大小时组件不会重新渲染更新图片

正确代码

import cclogomobile from '../../assets/cc-logo-mobile.svg';
import cclogo from '../../assets/cc-logo.svg'; // 补上桌面端图片导入
import React, { useState, useEffect } from 'react';

export default function ImageComponent() {
  // 存储当前窗口宽度的状态
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  // 监听窗口resize事件
  useEffect(() => {
    const updateWidth = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', updateWidth);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', updateWidth);
  }, []);

  return (
    <>
      <img 
        src={windowWidth > 700 ? cclogo : cclogomobile} 
        alt="cclogo" 
      />
    </>
  );
}