我正在传递一个名为product的道具，它在变量images中有一个对象列表。我想在前端显示id号为1的第一个图像。另外，如果我想遍历图像，最好的方法是什么。我已经将在postman上看到的对象图像作为照片附加。我正在尝试在card〈Card.Img src={product.images} /〉中显示这一行

{
    function Product({ product }) {
    return (
        
        <Card className="my-3 p-3 rounded">
            <Link to={`/product/${product._id}`}>
                <Card.Img src={product.images} />
            </Link>

            <Card.Body>
                <Link to={`/product/${product._id}`}>
                    <Card.Title as="div">
                        <strong>{product.name}</strong>
                    </Card.Title>
                </Link>

                <Card.Text as="div">
                    <div className="my-3">
                        <Rating value={product.rating} text={`${product.numReviews} reviews`} color={'#f8e825'} />
                    </div>
                </Card.Text>

                <Card.Text as="h3">
                    ${product.price}
                </Card.Text>
            </Card.Body>
        </Card>
    )
}