Tengo algunos datos que estoy usando en una matriz que se ve así:
import image from "./image.jpg"; export const data = [ { id: 1, title: "kevin", content: `Guy`, image: {image}, contact: "123-1234-1234", }, ]Que se asigna a un componente para representar los datos:
<Grid container spacing={4}> {data.map((item, idx) => ( <Grid item key={idx} xs={12} sm={6} md={4}> <Card sx={{ height: "100%", display: "flex", flexDirection: "column" }} > <CardMedia component="img" sx={{ // 16:9 pt: "5.25%", }} image={item.image} alt="random" /> <CardContent sx={{ flexGrow: 1 }}> <Typography gutterBottom variant="h5" component="h2"> {item.title} </Typography> <Typography>{item.content}</Typography> </CardContent> <CardActions> {item.Contact ? <Button size="small">Contact</Button> : null} </CardActions> </Card> </Grid> ))} </Grid> </Container>¿Cómo haría para representar la imagen dado que se pasa como un atributo?
Estás usando image: {image} - eso está dando esta salida (otras propiedades eliminadas):
data = [{ image: { image: image } }] Si desea exportar el valor de la image con la image como clave, puede configurar la clave para que sea igual a la variable como valor (el método más simple):
image: image
O puede usar la inferencia del valor de propiedad para algo un poco más ordenado:
content: `Guy`, image,Código completo:
export const data = [{ id: 1, title: "kevin", content: "Guy", image, contact: "123-1234-1234" }];No está pasando la imagen a la clave de imagen en su objeto, sino un nuevo objeto con otra clave de imagen en él. Prueba esto en su lugar:
import image from "./image.jpg"; export const data = [ { id: 1, title: "kevin", content: `Guy`, image: image, contact: "123-1234-1234", }, ]