Question

如您所见，我对这些东西不是很精通 - 我有一个 Material UI 登录页面组件，并且图像占据了页面的很大一部分。我以这种方式在组件文件中导入图像：

import Image from "../images/image.jpg";

组件的样式部分如下：

const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh",
  },
  image: {
    backgroundImage: `url(${Image})`,
    backgroundRepeat: "no-repeat",
    backgroundColor:
      theme.palette.type === "light"
        ? theme.palette.grey[50]
        : theme.palette.grey[900],
    backgroundSize: "cover",
    backgroundPosition: "center",
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: "#039974",
  },
  form: {
    width: "100%", // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

...这是渲染图像的返回语句的一部分：

<Grid item xs={false} sm={4} md={7} className={classes.image} />

我在组件中也有这行代码，与这个问题相关：

const classes = useStyles();

现在，最后，我的问题是 - 为什么图像渲染大约。无论我做什么，都比组件的其余部分晚 1 秒？（我优化了图像，它是~27KB）我该怎么办？

材质 UI 图像渲染延迟

0 个答案: