System Information
- Strapi Version: 4.9.2
- Operating System: nextjs13
- Database: postgres
- Node Version: 18.16.0
- NPM Version: 9.6.4
- Yarn Version:
//api:http://127.0.0.1:1337/api/products?populate=*
Obtained data:
//This is the data code obtained from the main page:
//page/index.js
import HeroBanner from "@/components/HeroBanner"; import ProductCard from "@/components/ProductCard"; import Wrapper from "@/components/Wrapper"; import { fetchDataFromApi } from "@/utils/api"; export default function Home({ products }) { return ( <> <main> <HeroBanner /> <Wrapper> {/* products grid start */} <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-3 lg:gap-4 my-14 md:px-0"> {products?.data?.map((product) => ( <ProductCard key={product?.id} data={product} /> ))} </div> {/* products grid end */} </Wrapper> </main> </> ); } export async function getStaticProps() { const products = await fetchDataFromApi("/api/products?populate=*"); return { props: { products }, }; }
//This is the thumbnail card component:
//ProductCard.js
import React from "react"; import Link from "next/link"; import Image from "next/image"; const ProductCard = ({ data: { attributes: p, id } }) => { return ( <div className="group rounded-md shadow-xl"> <Link href={`/product/${p.slug}`}> <div className="transform overflow-hidden cursor-pointer"> <Image className="w-full h-full object-cover group-hover:scale-110 duration-500" width={640} height={640} src={p.image.data.attributes.url} alt={p.name} /> </div> <div className="p-4 text-black/[0.9]"> <h2 className="text-sm md:text-md lg:text-lg font-medium"> {p.name} </h2> </div> </Link> </div> ); }; export default ProductCard;
Other attributes such as titles can be displayed normally, but only thumbnail attributes cannot be displayed, and a prompt is displayed: TypeError: Cannot read properties of undefined (reading ‘url’)