Tuve un problema al mostrar mis datos de imagen obtenidos de mi API. desde mi consola no mostraba ningún error pero la tarjeta seguía sin mostrar ninguna imagen. Cómo puedo arreglar esto ? Creo que es porque la imagen está registrada como otro objeto a diferencia de la categoría y la marca.

mi ejemplo de datos Json:

 { "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 } } ] }

Mi código en 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> </> )