動態渲染組件的背景圖像未出現在第一次渲染時

Question

編輯：我通過在 Home function 中動態導入<Card>組件來解決此問題：

 const Card = dynamic(() => import("@material-ui/core/Card"), {
    loading: () => <div>Loading...</div>,
  });

---

出於某種原因，當我使用背景圖像（ <CardMedia>組件）動態渲染 Material UI 卡片時，圖像不會出現在第一次渲染中。 當我刷新頁面時，它們也沒有顯示。

但是，當通過npm run dev重新構建頁面時（在修改和保存文件后），圖像僅在頁面再次刷新時才會消失！

如果我將源用作<img> ，它們會出現在第一次渲染和后續刷新時。 所以它必須與Material UI或背景圖像的SSR有關。

有人有想法嗎？

PS。 它與 Apollo 無關，我使用的是從我的目錄中的 JSON 文件導入的數據。

import Layout from "../components/Layout";
import Head from "next/head";
import Link from "next/link";
import items from "../seeds";
import { makeStyles } from "@material-ui/core/styles";
import { withApollo } from "../lib/apollo";
import { useQuery } from "@apollo/react-hooks";

//GQL
import gql from "graphql-tag";

//CARD IMPORTS
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Typography from "@material-ui/core/Typography";

//CARD STYLES
const useStyles = makeStyles({
  card: {
    maxWidth: "100%",
    width: 270,
    margin: "1rem",
    textAlign: "center",
  },
  media: {
    height: 0,
    paddingTop: "56.25%",
  },
});

const HELLO_QUERY = gql`
  query HelloQuery {
    sayHello
  }
`;

function Home() {
  const classes = useStyles();
  const MAX_LENGTH = 125;

  const { data, loading, error } = useQuery(HELLO_QUERY);

  if (loading) {
    return <div />;
  }
  console.log(data);

  return (
    <div>
      <Layout>
        <Typography variant="h2" align="center">
          {data.sayHello}
        </Typography>
        <Link href="/about">
          <a>About</a>
        </Link>
        <div
          style={{
            display: "flex",
            flexWrap: "wrap",
            justifyContent: "center",
          }}
        >
          {items.map((item: any) => {
            return (
              <Card className={classes.card} key={item._id}>
                <CardActionArea>
                  <Link href={`/event/${item._id}`}>
                    <CardMedia
                      wide
                      className={classes.media}
                      image={item.image}
                      title={`${item.name} image`}
                    />
                  </Link>
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {item.name}
                    </Typography>
                    <Typography
                      variant="body2"
                      color="textSecondary"
                      component="p"
                    >
                      {`${item.description.substring(0, MAX_LENGTH)}...`}
                    </Typography>
                  </CardContent>
                </CardActionArea>
              </Card>
            );
          })}
        </div>
      </Layout>
    </div>
  );
}

export default withApollo(Home);

Answer 1

這可能有多種原因，因為我們看不到查詢的有效負載，所以很難預測

一些需要調試的地方： 1. 你的響應是否一致

2. 我將您的使用與我的一個項目實現進行了比較，我唯一的補充是在CardMedia中指定component={'img'}

3. 此外，可以按照此處的建議使用 cardActions API 代替將代碼包裝在link中 - How to make the entire Card component clickable in Material UI using React JS?

Answer 2

我通過在 Home function 中動態導入<Card>組件來解決此問題：

 const Card = dynamic(() => import("@material-ui/core/Card"), {
    loading: () => <div>Loading...</div>,
  });