我有一个Django RESTapi，输出数据如下：

{
"count": 1000,
"next": "http://127.0.0.1:8000/store/products/?page=2",
"previous": null,
"results": [
    {
        "id": 648,
        "title": "7up Diet, 355 Ml",
        "slug": "-",
        "description": "tincidunt eget tempus vel pede morbi porttitor lorem id ligula suspendisse ornare consequat lectus in est",
        "inventory": 82,
        "unit_price": 79.07,
        "price_with_tax": 86.977,
        "collection": 5,
        "images": [
            {
                "id": 1,
                "image": "http://127.0.0.1:8000/media/store/images/joan-tran-reEySFadyJQ-unsplash.jpg"
            },
            {
                "id": 4,
                "image": "http://127.0.0.1:8000/media/store/images/grant-ritchie-n_wXNttWVGs-unsplash_uJitfkC.jpg"
            }
        ]
    },  ...

我想把它连接到我的nextjs（13）应用程序，我可以通过下面的代码访问所有属性：

export default async function ProductsAll() {

const response = await fetch('http://127.0.0.1:8000/store/products/');
const { results } = await response.json();

return (
    <>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
            {results?.map((item: any) => (
                <div key={item.id} className="card card-compact bg-base-100 h-80 shadow-xl">
                    <figure><Image height={500} width={500} src={item.image} alt={item.title} /></figure>
                    <div className="card-body">
                        <h2 className="card-title truncate hover:text-clip">{item.title}</h2>
                        <p className="truncate hover:text-clip">{item.description}</p>
                        <div className="card-actions justify-end">
                            <button className="btn btn-outline btn-accent md:btn-md">
                                <Link href={item.slug}>Buy Now</Link>
                            </button>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    </>
)

}
但是图像返回其中具有多个值的对象。

如何在return函数中使用images对象中的第一个图像？

• 注意：我使用nextjs 13和appDir，它希望我直接使用函数内部的fetch()。我尝试过getStaticProps或其他方法，但它不允许。*