I am using Stratpi v4.9.2. When nextjs obtains API attributes, the title or other attributes can be displayed normally, but the thumbnail image component cannot be displayed

Questions and Answers
1
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:

ScreenShot Tool -20230424234300 (1)
ScreenShot Tool -20230424234300 (1)902×834 43.6 KB

//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’)

2

This may be a simple one, but I can see in the code you’ve provided you’ve used src={p.image.data.attributes.url} and not src={p.thumbnail.data.attributes.url}

The response is saying it cannot find the key you’re querying on the key you’re looking for it on. This would gracefully be handled if you had typescript support in your project with src={p.image?.data?.attributes?.url}, but I imagine you’re passing the unpopulated image in rather than a populated thumbnail

3

Hello my friend, neither of these options works:
src={p.image?. data?. attributes?. url}
Src={p.thumbnail?. data?. attributes?. url}
The title and price attributes are displayed normally.

4

Having looked at your data again I can see that the thumbnail is an array of values.

So to get the URL out you would need to use src={p.thumbnail.data[0].attributes.url} I imagine you’ve set up the thumbnail as an image that allows multiple. You can disable multiple images on the field settings in your content type manager if you only ever need one image. That way the code provided in my previous answer would work.

5

Thank you very much. This has worked:：
src={p.thumbnail?.data?.[0]?.attributes.url }