I have an issue with the width resizing of my images. When I load the default image, resizing occurs. However, when I load an image associated with an article, the desired resizing doesn't happen, and it remains at 900 instead of 300.
The image is supposed to be displayed using the <FeaturedImage> component in my page template at pages/blog/index.js.
import FeaturedImage from "@/components/FeaturedImage";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import SiteHeader from "@/components/SiteHeader";
import getAllPosts from "@/lib/posts";
/* Fonction asynchrone pour récupérer les données des articles */
export async function getStaticProps() {
const allPosts = await getAllPosts();
return {
props: {
allPosts: allPosts,
},
};
}
/* Définition du composant principal de la page de blog */
export default function BlogHome({ allPosts }) {
return (
<>
<Head>
<title>Blog</title>
</Head>
<div className="h-[50vh] min-h-[20rem] bg-[url('/home.jpg')] relative">
<div className="absolute bg-slate-900 inset-0 z-0 opacity-40"></div>
<SiteHeader className="header-blog-home z-10 relative" />
<h1 className="text-6xl text-center text-slate-100 relative z-10 py-8">
BLOG
</h1>
<p className="relative z-10 text-center text-slate-200 text-2xl">
Read our latest articles
</p>
</div>
<main>
<section className="post-list mt-4">
<ul>
{/* Mapping de la liste des articles récupérée */}
{allPosts.nodes.map((post) => (
<li key={post.slug} className="grid grid-col-5 gap-4 mb-4">
<div className="col-span-2">
{/* Affiche de l'image à la une de l'article */}
<FeaturedImage post={post} />
{/*console.log(
post.featuredImage.node.mediaDetails.sizes[0].sourceUrl
)*/}
</div>
<div className="col-span-3">
<h2 className="py-4">
<Link
href={`/blog/${post.slug}`}
className="text-blue-400 text-2xl"
>
{post.title}
</Link>
</h2>
{/* affiche le contenu de l'extrait d'un article de manière sécurisée en utilisant React */}
<div
className="text-lg"
dangerouslySetInnerHTML={{ __html: post.excerpt }}
></div>
{/* affiche les categories de l'article avec un liens*/}
<div>
Posted under {/* affiche post under ou publié sous*/}
{post.categories.nodes.map((category) => (
<Link
href={`/category/${category.slug}`}
key={category.slug}
className="text-blue-400 hover:text-blue-500"
>
{category.name}
</Link>
))}
</div>
</div>
</li>
))}
</ul>
</section>
</main>
</>
);
}
components\FeaturedImage.js
import Image from "next/image";
import Link from "next/link";
// Composant fonctionnel "FeaturedImage" qui prend un objet "post" en tant que paramètre
export default function FeaturedImage({ post }) {
let img = "";
// URL de l'image par défaut en cas de manque d'image dans "post"
const defaultFeaturedImage =
"http://nextjstest1.local/wp-content/uploads/2022/12/travel_icy-polar_022K.jpg";
// Dimensions par défaut pour l'image
const defaultWidth = "300";
const defaultHeight = "200";
// Affiche les données de post pour le débogage
console.log("Données de post :", post);
console.log(post.featuredImage);
console.log("url" + post.featuredImage.node.mediaDetails.sizes[0].sourceUrl);
// Vérifie si "post" a une image en vedette ("FeaturedImage")
if (post.FeaturedImage) {
// Si oui, récupère la première taille de l'image dans les détails multimédias
let size = post.FeaturedImage.node.mediaDetails.sizes[0];
img = {
src: size.sourceUrl,
width: size.width,
height: size.height,
};
// Si "post" n'a pas d'image en vedette, utilise l'image et les dimensions par défaut
} else
img = {
src: defaultFeaturedImage,
width: defaultWidth,
height: defaultHeight,
};
// Retourne un composant "Link" de Next.js avec une image liée
return (
<Link href={`/blog/${post.slug}`}>
<Image
src={img.src}
width={img.width}
height={img.height}
alt={post.title}
/>
</Link>
);
}
My query is : lib\graphqlRequest.js
export default async function graphqlRequest(query) {
// URL de l'API GraphQL que nous allons interroger
const url = "http://nextjstest1.local/graphql";
// En-têtes de la requête HTTP pour spécifier que nous envoyons des données au format JSON.
const headers = { "Content-Type": "application/json" };
// Effectue une requête POST asynchrone vers l'URL spécifiée avec les en-têtes
// et le corps de la requête fournis.
const res = await fetch(url, {
headers,
method: "POST",
body: JSON.stringify(query),
});
// Attend la réponse de la requête HTTP et la convertit en objet JSON.
const resJson = await res.json();
// Retourne la réponse JSON. Notez que cette fonction est asynchrone,
// ce qui signifie qu'elle renvoie une promesse résolue avec la réponse JSON.
return resJson;
}
and my next.config.js
{
/*
- next/image pour effectuer un certain nombre de vérifications pour s'assurer que les images sont sûres et provenant de sources approuvées.
- remotePatterns vous permet de spécifier les modèles d'URLs d'images distantes qui sont autorisés dans votre application.
*/
}
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true, //option qui aide à identifier des problèmes potentiels dans votre application
images: {
remotePatterns: [
{
protocol: "http",
hostname: "nextjstest1.local",
port: "",
pathname: "/**",
},
],
},
};
module.exports = nextConfig;
Ken White
126k15 gold badges237 silver badges476 bronze badges
2 Answers 2
It would help to have the output of your console.log(post.featuredImage) debugging statement.
This doesn't appear to be a GraphQL issue - all your sizing logic is here:
if (post.FeaturedImage) {
let size = post.FeaturedImage.node.mediaDetails.sizes[0];
img = {
src: size.sourceUrl,
width: size.width,
height: size.height,
};
} else
img = {
src: defaultFeaturedImage,
width: defaultWidth,
height: defaultHeight,
};
If your image is coming out at a size other than 300x200 it means you had to go through the first branch of that if statement which means that post.FeaturedImage is true-ish.
Also weird that you have width and height as strings but without units.
width: 300 makes sense as does width: "300px" but width: "300"?
TIL that "debugging" in French is "débogage" ;)
answered Oct 25, 2023 at 23:01
Michel Floyd
20.3k4 gold badges27 silver badges45 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
It was a CSS problem ...
I have to put
<li key={post.slug} className="grid grid-cols-5 gap-4 mb-4">
instead that
I written <li key={post.slug} className="grid grid-col-5 gap-4 mb-4">
I had to add the s at cols-5