Material UI CardMedia is not showing images

Question

I'm using CardMedia to display images on the screen but it is not showing it.

I have gone through the similar question on Stack Overflow. There the solution give is to import the image and then use it. But here I'm fetching image url from backend using API call.

I have also tried changng heights but it didn't work.

Can anyone explain what is the issue?

import React from "react";
import axios from "axios";

import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CircularProgress from "@material-ui/core/CircularProgress";

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: "56.25%",
  },
}));

function ProductList(props) {
  const [productList, setProductList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const classes = useStyles();

  const url = `https://api.growcify.com/dev/product/list/${props.listId}`;

  const getList = () => {
    axios.get(url).then((res) => {
      console.log(res.data);
      setProductList(res.data);
      setLoading(false);
    });
  };

  React.useEffect(() => {
    getList();
  }, []);

  return !loading ? (
    productList.length > 0 ? (
      productList.map((list) => (
        <Card className={classes.root}>
          <CardContent>{list.name}</CardContent>
          {list.photos.map((img) => {
            img !== null && (
              <Card className={classes.root}>
                {console.log(img)}
                <CardMedia
                  image={img}
                  component="img"
                  title="Some title"
                  className={classes.media}
                />
              </Card>
            );
          })}
        </Card>
      ))
    ) : (
      <h2>No Data Available </h2>
    )
  ) : (
    <CircularProgress />
  );
}

export default ProductList;

In the provided Screenshot, You can see in the console that I'm getting image url but image is not showing there.

Answer 1

image={"http://localhost:3000/yourPath/"+this.state.your-data.your-variable name} 

Dont forget to padding top Tell me if it works :D

Answer 2

Remove height: 0, from media style