Question

我使用 CardMedia 在屏幕上显示图像，但它没有显示。

我在 Stack Overflow 上遇到过类似的问题。给出的解决方案是导入图像然后使用它。但在这里我使用 API 调用从后端获取图像 url。

我也试过改变高度，但没有奏效。

谁能解释一下是什么问题？

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;

在提供的屏幕截图中，您可以在控制台中看到我正在获取图片网址，但图片并未显示在那里。

Answer 1

Remove height: 0, from media style

Answer 2

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

不要忘记填充顶部告诉我它是否有效：D

Material UI CardMedia 不显示图像

2 个答案: