Maison > Questions et réponses > le corps du texte
J'ai importé les deux images ( IMG
和 IMG2
)。 IMG 假设在视口宽度小于 600px 时显示,而如果视口宽度大于或等于 600px,则显示另一张。所以我添加了一个函数来检查视口宽度,然后它返回这两个图像之一,但问题是它只返回我放入函数中的第一个图像,即 IMG
. Même si la largeur de la fenêtre d'affichage devient supérieure à 600 px, elle affiche toujours IMG au lieu de IMG2. Remarque : Je peux résoudre ce problème en utilisant simplement des requêtes multimédias et en définissant l'affichage sur Aucun, mais je souhaite savoir comment résoudre ce problème en utilisant React
Lien vers tout mon code dans 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; } }
P粉4019012662024-04-03 10:46:34
Pour ce faire avec React, vous devez joindre à l'événement de redimensionnement du document.
Vous trouverez ci-dessous un exemple simple de modification de la couleur du texte et de l'arrière-plan lors du redimensionnement.
const {useEffect, useState} = React; const getWidth = () => document.documentElement.clientWidth; const ResizeCheck = () => { const [width, setWidth] = useState(getWidth()); useEffect(() => { const resize = () => setWidth(getWidth()); window.addEventListener('resize', resize); return () => window.removeEventListener('resize', resize); }, []); return{ width >= 600 ?; } const root = ReactDOM.createRoot(document.querySelector('#mount')); root.render(Greater than equal to 600:Less than 600});
sssccc sssccc