map图片源嵌套JSON object在react js中如何实现？

Question

I had problem in showing my fetched image data from my api. from my console it didn't show any error but the card still not showing any image. How can I fix this? I think it's because the Image is registered as another object unlike category and brand.

my Json Data Example:

{
    "count": 5,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 5,
            "slug": "flashdisk-robot-16gb",
            "sku": "dsadsa232232",
            "name": "Flashdisk  Robot 16Gb",
            "description": "Ini adalah flashdisk",
            "weight": 6,
            "price": 30000,
            "stock": 0,
            "datetime_added": "2022-03-13T11:28:25.575695Z",
            "images": [
                {
                    "id": 1,
                    "image": "http://127.0.0.1:8000/products/PhotoRoom-20211115_151817.png"
                }
            ],
            "brand": {
                "id": 1,
                "slug": "lg",
                "name": "LG",
                "image": null
            },
            "category": {
                "id": 1,
                "slug": "electronic",
                "name": "Electronic",
                "image": null
            }
        }
    ]
}

My Code in React:

  useEffect(() =>{
    axios.get(`http://127.0.0.1:8000/data/products/?format=json`).then(res => {
        const products = Object.values(res.data);
        var filteredCategory = products[3].filter((product) => product.category.slug === categoryslug)
        setProductList(filteredCategory)
      })
  }, []);

console.log(productList)
  return (
    <>
      <Row>
        {productList && productList.map(product =>{
          const {id, name, price, category,images, slug} = product;
          return(
          <Col lg={3} key={id} className="d-flex">
            <Link className='card-product d-flex' to={`/product/${category.slug}/${slug}`}>
              <Card  className="flex-fill productlist">
                <Card.Img variant="top" src={images.image}/>
              </Card>
            </Link>
          </Col>
          )
        })}
      </Row>
    </>
  )

Answer 1

images is an array of objects:

"images": [
  {
    "id": 1,
    "image": "http://127.0.0.1:8000/products/PhotoRoom-20211115_151817.png"
  }
],

so you have to do images[0].image for it to work.

<Card.Img variant="top" src={images[0].image}/>

Answer 2

<Row>
        {productList && productList.map(product =>{
          const {id, name, price, category,images, slug} = product;
          return(
          <Col lg={3} key={id} className="d-flex">
            <Link className='card-product d-flex' to={`/product/${category.slug}/${slug}`}>
              <Card  className="flex-fill productlist">
                {
                  images.map((val,index)=><Card.Img key={index} variant="top" 
                     src={val.image}/>
                }
              </Card>
            </Link>
          </Col>
          )
        })}
      </Row>