如何在react中当窗口大小改变时改变图像

Question

我尝试使用三元运算符，但它不起作用

import cclogomobile from '../../assets/cc-logo-mobile.svg'
import React, { useState } from 'react'

export default function imag(){
return(
 <>
  <img src={(window.width>700)? {cclogo}:{cclogomobile}} alt="cclogo" />
 </>
)}

Answer 1

如果您想包含该功能，请尝试添加 EventListener 来查找事件更改。除此之外，您只需在组件内使用

window.innerWidth

而不是

window.width

即可。另请确保导入您正在使用的其他图像

import cclogomobile from '../../assets/cc-logo-mobile.svg'
import React, { useState } from 'react'        

export default function Image() {
  const [largeScreen, setLargeScreen] = useState(false);
    
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
       if (window.innerWidth>700) {
          setLargeScreen(true);
       }
    }
    
    // Add event listener
    window.addEventListener("resize", handleResize);
    handleResize();
    
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []);
    
    return <img src={largeScreen ? {cclogo}:{cclogomobile}} alt="cclogo" />
}