Recibo un JSON local para simular una conexión API, en el proyecto tengo algunas imágenes trabajando con importaciones: import product_1 from '../../assets/image/product_1.png'; pero en mi JSON local tengo una clave de imagen con los productos, mi problema es intentar llamar a esa clave.

Este es mi JSON local:

 { "products": [ { "id": 1, "name": "CAMISA DE DOTACIÓN PARA PERSONAL DE VIGILANCIA Y SEGURIDAD PRIVADA", "image": "Product_1" }, { "id": 2, "name": "CAMISA O BLUSA DE DOTACIÓN PARA PERSONAL ADMINISTRATIVO Y/O DE PLANTA INDUSTRIAL", "image": "Product_2" }, { "id": 3, "name": "CAMISA EN JEAN", "image": "Product_3" }, { "id": 4, "name": "Product 4", "image": "Product_4" }, { "id": 5, "name": "Product 5", "image": "Product_5" } ] }

y este es mi mapa en reaccionar:

 import React, { useState } from 'react'; import { product_1, product_2, product_3 } from '../components/utils/Images'; import data from '../assets/data/products.json' const Catalogo = () => { return( { data.products.map((product, index) => { return ( <div className='col-3'> <Image src={product.image}/> // this line will return <Image src={product_1}/> <Button variant="primary" style={{zIndex:"40"}} onClick={() => counter(index)}>Ver</Button> </div> ) }) } ) } export Catalogo