CODEWITHSUNDEEP
reactjsmaterial-ui
Rizvi Ahmed Zillhaz
Rizvi Ahmed Zillhaz

Reputation: 57

Image is not loading in CardMedia in React

I have used an image as an object with a http link and also and image from the project source folder but it is not showing in the project.

Card and everything is loading up but image is not loading.

image location is public/assests/image

App.js

import React from 'react';
import Products from './components/Products/Products';

function App(props) {
    return (
        <div>
            <Products />
        </div>
    );
}

export default App;

Products.jsx

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: 'assests/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;

Product component holding all the products Product.jsx

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;

Upvotes: 0

Views: 411

Answers (3)

Gautam Kothari
Gautam Kothari

Reputation: 321

Just replace the image='product.image' with image={product.image} and your problem solved

        <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>

Upvotes: 0

Reza Ghorbani
Reza Ghorbani

Reputation: 537

In products array image with id:1 is ok

but image with id:2 does not contain correct image with HTTP link it should change to correct image link (in google image, right-click:copy image address)

Inside Product.js file, change image property of CardMedia to image={product.image} and it's style={{minHeight:300}}

Products:

const products = [

    { id: 1, name: 'Shoes', description: 'Running shoes.', price: '$100', image: 'assets/image/run.jpeg' },
    { id: 2, name: 'Macbook', description: 'Apple Macbook', price: '$120', image: 'data:image/jpeg;base64,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' },

]

Product

 <CardMedia image={product.image} alt={product.name} style={{minHeight:300}}/>

Upvotes: 0

ray
ray

Reputation: 27265

You're setting image='product.image', which sets it to the literal string "product.image". Perhaps you meant image={product.image}?

<CardMedia
  className={classes.media}
  image={product.image}
  title={product.name}
/>

Upvotes: 1

Related Questions