ReactJS -图像不显示在物料表的自定义列中

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';

const useStyles = makeStyles({
  media: {
    height: 140,
  },
});

function MyCard({ imageUrl }) {
  const classes = useStyles();

  return (
    <Card>
      <CardMedia
        className={classes.media}
        image={imageUrl}
        title="Image title"
      />
    </Card>
  );
}

export default MyCard;

.card-media {
  display: block;
  width: 100%;
  height: auto;
}

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';

const useStyles = makeStyles({
  media: {
    height: 140,
  },
});

function MyCard({ fetchImageUrl }) {
  const classes = useStyles();
  const [imageUrl, setImageUrl] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchImageUrl().then((url) => {
      setImageUrl(url);
      setLoading(false);
    });
  }, [fetchImageUrl]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <Card>
      {imageUrl && (
        <CardMedia
          className={classes.media}
          image={imageUrl}
          title="Image title"
        />
      )}
    </Card>
  );
}

export default MyCard;