圖像不會在 React Image Slider 中顯示

Question

我想看看我在這里調用我的圖像時做錯了什么。 我設置了 slider 並且處理圖像不會顯示在幻燈片中。

使用 React 幻燈片圖像。 任何人都推薦任何 slider 庫，它們全屏用於主頁上的背景圖像？

這是我的代碼：

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