Image is not loading in CardMedia in React - reactjs

Question

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;

Answer 1

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

Answer 2

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

Answer 3

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>