Ich habe beide Bilder importiert ( IMG 和 IMG2 ）。 IMG 假设在视口宽度小于 600px 时显示，而如果视口宽度大于或等于 600px，则显示另一张。所以我添加了一个函数来检查视口宽度，然后它返回这两个图像之一，但问题是它只返回我放入函数中的第一个图像，即 IMG . Auch wenn die Breite des Ansichtsfensters größer als 600 Pixel wird, wird immer noch IMG anstelle von IMG2 angezeigt. Hinweis: Ich kann dieses Problem lösen, indem ich einfach Medienabfragen verwende und die Anzeige auf „Keine“ setze, aber ich möchte wissen, wie man dieses Problem mit React löst

Link zu meinem gesamten Code in Github: https://github.com/Issamath/PerfumeProduct.com

import IMG from '../../assets/image-product-mobile.jpg'
import IMG2 from '../../assets/image-product-desktop.jpg'

const ProductImage = () => {
  function displayImage(){
    let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
    console.log(vw);
    if(vw < 600) {
     console.log(vw + "is smaller than 600");
     return (<img src={IMG} alt="" />);
    } else {
     console.log(vw + "is bigger than 600");
     return (<img src={IMG2} alt="" />);
    }
}
  return (
    <div className='container-img'>
      {displayImage()}
    </div>
  )
}

export default ProductImage

.container-img img {
    height: 15rem;
    width: 100%;
    background: white;
    border-radius: 0.8rem 0.8rem 0 0;
}

.container-img {
   
}

 /* -----------------for bigger phones------------------- */

@media screen and (min-width: 390px) {
    .container-img img {
        height: 20rem;
    }
}