图像不会显示在 React 图像滑块中

Question

我试图看看我在调用图像时做错了什么。我已经设置好了滑块，处理幻灯片时不会显示图像。

使用React幻灯片放映图像。有人推荐任何在主页上全屏显示背景图像的滑块库吗？

这是我的代码：

import React from 'react'
import { Fade } from 'react-slideshow-image'
import * as styles from '../styles/slider.module.css'
import 'react-slideshow-image/dist/styles.css'
const fadeImages = [
'src/images/constructionconcrete.jpg',
'src/images/constructionbuilding.jpg',
'src/images/constructiondusk.jpg'
];
const ImageSlider = () => {
return (
<div className={styles.imageContainer}>
<Fade>
<div className={styles.eachFade}>
<div>
<img src={fadeImages[0]} />
</div>
<p>First Image</p>
</div>
<div className={styles.eachFade}>
<p>Second Image</p>
<div>
<img src={fadeImages[1]} />
</div>
</div>
<div className={styles.eachFade}>
<div>
<img src={fadeImages[2]} />
</div>
<p>Third Image</p>
</div>
</Fade>
</div>
);
};
export default ImageSlider;

任何帮助都将不胜感激！

谢谢！

Answer 1

我可以猜测图像URL与该文件的位置无关。尝试使用相对URL，例如，如果它位于两个文件夹上，则它将是../../images/whatever

如果不是这样，另一个想法可能是div或其他元素没有可见的尺寸，所以试着修改它们的宽度和高度

Answer 2

尝试将images文件夹放入public文件夹，并更改图像url列表，使每个字符串看起来像"images/first.jpg"