J'ai une application Next.js, et j'ai besoin d'une image qui remplit toute la hauteur de son conteneur tout en décidant automatiquement de sa largeur en fonction de son rapport d'aspect.
J'ai essayé ce qui suit:
<Image
src="/deco.svg"
alt=""
layout="fill"
/>
Cet extrait compile avec succès, mais sur le frontend, je vois l'erreur suivante:
Erreur: image avec src "/deco.svg" doit utiliser "largeur" et "hauteur" propriétés ou propriétés "non taillées".
Cela me confond parce que selon les docs , ceux-ci Les propriétés sont pas requises lors de l'utilisation de Layout = "Fill" .
8 Réponses :
Je pense également fournir un attribut d'objet-ats sur l'élément d'image comme celui-ci: -
<Image
alt="Mountains"
src="/mountains.jpg"
layout="fill"
objectFit="cover"
/>
Exemple fourni par NextJS peut être https://github.com/vercel/next.js/blob/canary/examples/image -Component / Pages / Layout-Fill.js
c'est ce qui a fonctionné pour moi:
<div style={{width: '100%', height: '100%', position: 'relative'}}>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
Yup, le parent de l'image doit avoir des propriétés relatives .
Vous définissez les valeurs absolues pour la hauteur et la largeur, mais la question indique en pourcentage
Je voudrais juste ajouter quelque chose à cette réponse, dans mon cas, où j'avais besoin que l'image soit alignée sur la gauche, vous pouvez ajouter l'attribut ObjectPosition = "Left"; Il est transmis à la position d'objet CSS: "gauche"; Plus d'informations - Developer.mozilla.org/en-us/docs / Web / css / position objet
Voici un moyen: Par exemple, je veux avoir une image qui couvre toute la largeur et la hauteur de son conteneur qui est un div.
// Nested Styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
.image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // Optional
}
}
// Or Normal Styling
.image-container {
width: 50vw;
height: 50vh;
position: relative;
}
.image-container .image {
width: 100%;
height: 100%;
position: relative !important;
object-fit: cover; // Optional
}
Et voici le style: (Il y a un div de conteneur qui occupe la demi-largeur et la hauteur de la fenêtre et mon image le couvrira.)
<div className={'image-container'}>
<Image src={path} layout="fill" className={'image'} />
</div>
C'est l'une des meilleures solutions que j'ai trouvées pour une image distante. Pour les images locales, c'est beaucoup plus facile, mais pour les images chargées dynamiquement, cette solution fonctionne comme un charme.
<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>
Dans le cas où vous ne souhaitez pas utiliser des valeurs absolues pour la hauteur et la largeur, c'est-à-dire en PX, etc., vous pouvez faire quelque chose comme ceci
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
<Image
alt="Image Alt"
src="/image.jpg"
layout="fill"
objectFit="contain" // Scale your image down to fit into the container
/>
</div>
source d'origine https://stackoverflow.com/a/66358533/12242764
Si quelqu'un utilise NextJS avec des composants stylisés. Il fonctionne:
const Container = styled.div`
width: 100%;
div, span {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
`;
<Container>
<Image src={ src }
layout="fill"
className={ "image" }
/>
</Container>
<div>
<Image
alt=""
src="https://some/image/uri"
width="100%"
height="100%"
layout="fill"
objectFit="contain"
/>
</div>
Cela fonctionne pour moi dans le composant d'image suivant.js
0 commentaires