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;

CodePudding user response：

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

CodePudding user response：

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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw0NDQ0NDQ8ODQ0NDQ0NDQ0NDQ8NDQ0NFREWFhURFRUYKCggGBooGxUVITEhMSs3Oi4uFx83ODMsNygtLysBCgoKDQ0NEQ0PDysZFRkrLSsrKzc3NzcrKysrKysrKy0rNzcrKysrKysrKysrKysrKysrLSsrKysrKysrKysrK//AABEIAM0A9gMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAAAAwIEAQUGB//EAEYQAAIBAwEBCQwJAQcFAAAAAAABAgMREgQFBhUhMVFTcXOSExQiM0FUYYGTssHRJCUyNFJykaGxwgcjQkRilNIWQ4KE8P/EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/EABYRAQEBAAAAAAAAAAAAAAAAAAABEf/aAAwDAQACEQMRAD8A9xAChqNqU4ScUnNrgdrJJ8lwL4Gr34XNvtIN Fzb7SA2gGr34XNvtIzvuubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1m y5t9pBvsubfaQGzA1m y5t9pBvsubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1m 65t9pBvuubfaQGzA1e/C5t9pBvwubfaQG0A1e/K5uXaRe0uqhVV4Pi40 BrpAcAAAuvJqE2uNRk102OUovgR1Wr8VU/JP GclQfAiwWok0hcWNRUFgsZuFwCxixm4XAxYzYLhcDFjNguFwCwWC4XALBYLhcAsFguFwMWM2MXM3AxYLGbhcDFgsZuFwMWCwXM3AjiYaJEWwFyLOxZtai3klCV/U0VZjtiv6VH8k/gQdKAARSdZ4qp1c/dZyGmfgroOv1niqvVz91nG6V CuhFgvRZNMVEncqJ3C5C4XAncLkLhcCdwuQuFwJ3C5C4XAncLkLhcCdwuQuFwJ3C5C4XAncLkLhcCdwuQuFwJ3C5C4XAncLkLhcCVzDZi5hsCE2O2I/pUern8CvNjdhP6XHq6nwIOqAAIpOt8TV6ufus4vSPwV0HZ63xNXq5 6zidI/BXQiwX4sncTFk7lRO4XIXC4E7hchcLgTuFyFwuBO4XIXC4E7hcjcxcCdwuQuFwJ3C5C4XAncLkLhcCdwuQuFwJ3C5C4XAncLkLhcCdzDZG5hsCM2N2C/pkerqfArzY7YD mR6up8AOuAAMqRrvE1eqqe6zhtI/BXQjudd4mt1VT3WcFpH4K6EWC/Fk0xMWTuVDLhcXcLgMuFxdwuAy4XF5BcBlwuLuFwGXC4u4XAZcLi7mU78CAncLkakXGyfJcjkAy4XF3C4DLhcXcLgMuFxdwuAy4XF5BcCdwbIXMOQGJsfuef02PV1PgVJss7nH9Nj1VT4AdkAAZUjX IrdVU91nn kfgroR3 0PEVuqqe6zzvSS8FdCLBsIyJ3K8ZEsiodkGQrIMgG5BcVkGQDcguKyDIBuQXFZBkA3ILisgUgNFuk3Y6XZ8lSkp167Sk6VLHwIvicpPgV Q6TZeohXpU9TQlGpSqwUoS4Y8D5V5GuFNeR3PAtuV5VNZq5zd5S1Ne9/RNpL1JJeo6P z3dS9FV72rSfeteXA2 ChWfBl6IvgT9T5SaPYalCT4ck3ycRWuRervwX4yGRQ24ZCsgyAbcMhWQZANyC4rIMgG5BkKyDIBuRhsXkYcgMzZZ3NP6dHqqnwKM5Fvcu/p0eqq/AUdwAAZVX2h4it1VT3WebaSXgroR6TtHxFfqanus8x0svBXQiwX1IkpFZSJZlQ/IzkIzDMB QZCMwzAfkGQjMMwH5BkIzDMB QZCMwzA8p3d7Mem19SaX91qW69N TJ Mj0qTb6JI509p2xsyhraTo14txvlGUXadOf4ovyM02m3C7OhG041azf OdaUWuhQsiYNZuQ3STnBaepJurSS7nJu7qU1xL0tfuvWd/SlLFZfassrcpzOydx i0ldaiHdak4u9NVZRcab5VZK76Tosyh QZCMwzAfkGQjMMwH5BkIzDMB QZCMwzAfkYchGYOYE5SL25V/T49VV Bq5SNhuSf1hHqavwFHfgAGVVtpfd6/U1fdZ5bppeCuhHqW0vu9fqavus8poPwV0IsFtSJZCMjORUOyDITkGQDsgyE5BkA7IMhOQZAOyDITkGQDsgyE5GcgG5BkJyDIB2QZCcgyAdkGQnIMgHZBkJyDIB2QZCsgyAbkGQnIMgHZGMhWRjIBjkbPce/rCPU1fgadyNtuMf1hHqavwFHogABlVbaX3ev1NX3WeTUX4K6Ees7S 71 pq 6zyKk/BXQiwWMjOQq4ZFQ3IMhWRnIBmQZC8gyAZkGQvIMgGZBkLyDIBmQZC8gyAZkGQvIMgGZBkLyDIBmQZC7hkAzIMheQZAMyDIXkGQDMgyF5BcBmRjIXcMgGNm53FP6wj1NX4GhubzcQ/rCPU1f6RR6OAAZVW2n93r9TV9xnj1GXgroPYdp/d6/U1fcZ4zRl4K6CwWbhkKyMZFQ7IMhOQZAOyDITkGQDsgyEuYitq4xTbaSXG27IC7kQlWSNfCpWq Lg8X/jqXhD1eV/oV9TrNFQbWp1XdJrjo6e9 hqN2vW0BsqutjHjaXS0iMNTOfi4VKn5Kc5L9UjSf9XUab iaJJ85WaUv2u3 oiruw2nP7MqVL8lJP3rgdRHT6uXFp6vrwj/LJd5a3zefbo/8jjZbe2pLj1VVflxh/CBbY2ov83qPXUbA66VPUx 1QrLojn7txT1yi7TvB8k04P8ARnNw3R7Vh/mJS9E6dOX8osx3Y621q1KjWj5VaVNv V wHQw1KY1VEzm4bf0E/G0aukl Kn4VNP8A8f8AiX6Es456atT1MFxrJKa6WvL6LIDbZBkayGts8ZpwlySVr9D4n6i1GsmBZyDITmGQDsgyE5BkA7ILicjOQDLm93Cv6xj1NX k57I324J/WMeoq/0ij00AAyqttP7vqOpq 4zxOlPwV0HuOopKpCcHwKcJQfQ1Y8J1tGrpakqFeLp1Kbs0 C6/EuVPyMsD3UMZlLvhcod8LlKi7mGZS74XKHfC5QLuZCddI19bXRiuP4iNTUhSh3bWS7nT4oUeOdR8jS43/p/UC7GrUrO1JLHidSX2F0fifR qNfq9s6XTyapp63UxfHddypy/NxR9V3ymm1u1a s8Bf3Gn4lSg7SnH/XJe6uDpGaPQxikuBJeRAY1Wt1uruqtRxg/ 1RvTp29Pll62Gm2Wl5El6EbWjRguQtQxXIQUKWzkvIWYaFchaVSPKiSrR5UUIWjXIS71Q7u0eVB3ePKAh6RcgqejXIW 7R5UDqx5UBq6uz0/IUKuzHGWcHKE1xThJwmvWjoHOPKhcnH0AaultjU0lhqYLV0vK7RjWS92f7dJtdFqKVZOWlqZY/ao1G1OHod Fevg5CtVpQfIavVaJKSqQk6dSP2akHjOPr5PQB09LV8OMrxkuOL4Gv/ALlLKq3OZ0u24u1LXWi KGqhaMb/AOr8D/Z g2dSc6LWfDB/ZqL7L5E R/yBtMwzKENVF Ul3wuUC7mCqFLvhcod8LlAvqodD/Z 77SXUVv6Tj  Fync/wBmGzqk61TWSi1RjTlSpyasqk5SV3HlSUbev0MD0gAAyoE6jS0qqSq06dRLiVSEZpfqOACjvPo/NdN7Cn8g3n0fmum9hT ReIuQFPefR a6b2FP5Eauy9DCMpz0 ljGKcpSlRpKMYpXbbtwItTrJHl 6/df37qqWzdJnUhOpTUnTi5Rd5pd2qPyU43uuW1/LEChtqNTX69LQaaNVOcqeijT0y09ClFKOdatUS4ONO74bOKjG7d 53N7hNHpIupqYw1 sqJKrXr04zhFcfc6NOV1Th 78rfBbY6KdLT0oUaKUKcFaKXl5W35W NssLXASWwtAuLSaRf tS RLeXRea6b/b0vkEdYTWpAjvPo/NdN7Cn8g3n0fmum9hT Q1agkqwCN59H5rpvYU/kG8 j8103sKfyLKqme6AVd59H5tpvYU/kG8 j8103sKfyLXdA7oBV3n0fmum9hT Qbz6PzXTewp/Itd0IuqBX3n0fmum9hT Qbz6PzXTewp/Ie6xF6gBW8 i8103sKfyMbzaLzXTf7el8ictULlrAMPYWgfHpNI nTUvkcBus3CvSxqajZ1N1tI03X2clnKlH/FPTLjceWl2fwvu5a8hviBzO4Grpa0HpdVS08q8LSod10kIVamnwTSk2vCkr8ibjZu7uzsN59H5tpvYU/kcTu/qY0aeuownLUaepTydBN13SbtdJcbi2n0ZG23G7r6e0qCeS7tGKzS4FNcWaXk9K8j9DRR0G8 j8103sKfyDefR a6b2FP5DoV7j0yCmtkaNcWm0/sKfyLiSSSXAlwJLgSRkAAAAAAAACEokwAqVKTZzuh3IaLS6ivqdPSdOrqLKpacu52X4YcUfUdZYMUBpHpGZjpGbnFBigNXHTMZGgzY4oLAUlRZNUmWrGbAV1TZnuY8AE4BgOABDpkXTZZCwFR0mQdFl6xiwGulQYmemZt7BigNFLRsW9FI6DBBggNB3g3wMp7ntyek2d3TvWlg6snKcpSlUlw28FOXCo8C4OI6vBGcUBTpUmi3BGbGQAAAAAAA//9k=' },

]

Product

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

CodePudding user response：

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>