物料UI旋转木马自动播放和加载图像问题

Question

嗨，我找到这个了https://github.com/Learus/react-material-ui-carousel在我的网站上使用它。但我遇到了两个问题：

1. 为了设置autoPlay状态，我必须将其更改为class，这导致无法使用const classes = useStyles()，所以有人知道我该怎么办吗？

2. 我在同一目录下的img文件夹中保存了3张jpg照片，我不知道为什么这些照片不能加载到我的本地主机中。

这是我的代码：

import React from 'react';
import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import Carousel from 'react-material-ui-carousel';
import CarouselSlide from 'react-material-ui-carousel';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
const theme = createMuiTheme ({
palette: {
primary:{
main:'#3c52b2'
}
}
})
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
Button: {
"&:hover": {
backgroundColor: "#fff !important"
}
},
title: {
flexGrow: 1,
},
}));

export default function UMainPage (){
const pictures = [
{image:'./2.jpg', title:'Iu 1'},
{image:'./3.jpg', title:'Iu 2'},
{image:'./4.jpg', title:'Iu 3'}
];
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
清动订馆平台
</Typography>
<Button color="inherit">首页</Button>
<Button color="inherit">历史订单</Button>
<Tooltip disableFocusListener disableTouchListener title="登录账号">
<Button color="inherit">未登录</Button>
</Tooltip>
</Toolbar>
</AppBar>
<Carousel>
{pictures.map(({image, title}) => (
<CarouselSlide key={image}>
<Card>
<CardMedia
image={image}
title={title}
style={{
height: 0,
paddingTop: '25%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card>
</CarouselSlide>
))}
</Carousel>
</ThemeProvider>
);
} 

Answer 1

1. 为了设置autoPlay，您应该将其传递给Carousel，如下所示：

<Carousel autoPlay>
...
</Carousel>

如果你想有能力改变它，你应该保持状态：

const [autoPlay, setAutoPlay] = useState(true);

2. 您应该先导入图像，然后将它们保留在pictures阵列中：

import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
...
const pictures = [
{ image: image2, title: "Iu 1" },
{ image: image3, title: "Iu 2" },
{ image: image4, title: "Iu 3" },
];