I am facing an issue where the images in my project are not showing up. I have tried using an image with a HTTP link and also an image from the project source folder, but both are not loading.
Everything else on the card is loading fine except for the images.
The image location is specified as public/assets/image
In my App.js file:
import React from 'react';
import Products from './components/Products/Products';
function App(props) {
return (
<div>
<Products />
</div>
);
}
export default App;
In my Products.jsx file:
import React from 'react';
import { Grid } from '@material-ui/core';
import Product from './Product/Product';
const products = [
{ id: 1, name: 'Shoes', description: 'Running shoes.', price: '$100', image: 'assets/image/run-asics-running-shoes-1636736175.jpeg' },
{ id: 2, name: 'Macbook', description: 'Apple Macbook', price: '$120', image: 'https://images.app.goo.gl/b8T9vFGUzQeHvRmM9' },
]
const Products = () => {
return (
<main>
<Grid container justify="center" spacing={4}>
{products.map((product) => (
<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
<Product product={product} />
</Grid>
))}
</Grid>
</main>
)
}
export default Products;
The Product component holds all the products. In Product.jsx file:
import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton } from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';
import useStyles from './styles';
const Product = ({ product }) => {
const classes = useStyles();
return (
<div>
<Card className={classes.root}>
<CardMedia className={classes.media} image='product.image' title={product.name} />
<CardContent>
<div className={classes.cardContent}>
<Typography variant="h5" gutterBottom>
{product.name}
</Typography>
<Typography variant="h5" >
{product.price}
</Typography>
</div>
<Typography variant="body2" color="textSecondary">
{product.description}
</Typography>
</CardContent>
<CardActions disableSpacing className={classes.cardActions}>
<IconButton aria-label="Add to Cart">
<AddShoppingCart />
</IconButton>
</CardActions>
</Card>
</div>
);
}
export default Product;