滑块不会在 ReactJS 中显示图像

Question

我正在 ReactJS 中创建一个 Slider。我将图像放在一个数组（dataSldier.js）中，我将其导入到（Slider.js）文件中，但我的图像没有显示。我的箭头图标正在显示，所以很混乱。 我的代码编译成功，但是我的滑块是空白的，只显示导航箭头。请问我做错了什么？

这是滑块 ::: 的代码

import React, { useState } from 'react'
import './Slider.css'
import BtnSlider from './BtnSlider'
import dataSlider from './dataSlider'


export default function Slider() {

    const [slideIndex, setSlideIndex] = useState(1)

    const nextSlide = () => {
        if(slideIndex !== dataSlider.length){
            setSlideIndex(slideIndex + 1)
        }
        else if (slideIndex === dataSlider.length){
            setSlideIndex(1)
        }

    }

    const prevSlide = () => {
        if(slideIndex !== 1){
            setSlideIndex(slideIndex - 1)
        }
        else if (slideIndex === 1){
            setSlideIndex(dataSlider.length)
        }
    }

    const moveDot = index => {
        setSlideIndex(index)
    }
    return (
        <div className="container-slider">
            {dataSlider.map(({imgPath, index}) => {
                return (
                    <div
                        key={index} 
                        className={slideIndex === index + 1 ? "slide active-anim" : "slide"}>
                        <img
                            src={imgPath}
                            alt=""
                        />
                    </div>
                )
            })}
            <BtnSlider moveSlide={nextSlide} direction={"next"}/>
            <BtnSlider moveSlide={prevSlide} direction={"prev"}/>

            <div className="container-dots">
                {Array.from({length: 5}).map((item, index) => (
                    <div 
                    onClick={() => moveDot(index + 1)} 
                    className={slideIndex === index + 1 ? "dot active" : "dot"}
                    ></div>
                ))}
            </div>
        </div>
    )
}

这是图片的dataSlider :::

import hic from '../Imgs/IMG_0061.jpg'
import fic from '../Imgs/IMG_6855.jpg'
import vic from '../Imgs/IMG_2002.jpg'
import ric from '../Imgs/IMG_2003.jpg'
import oic from '../Imgs/IMG_0096.jpg'


    const dataSlider = [
        {
            imgPath :{hic},
        },
        {
            imgPath : {fic},
        },
        {
            imgPath: {vic}, 
        },
        {
            imgPath : {ric},
        },
        {
            imgPath : {oic},
        },
    ];
    
    export default dataSlider;

CSS 代码::

.container-slider {
  max-width: 700px;
  height: 500px;
  margin: 100px auto 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 700px) {
  .container-slider {
    margin: 100px 10px 0;
  }
}
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 1;
  transition: opacity ease-in-out 0.4s;
}
.slide img {
  width: 600px;
  height: 600px;
  object-fit: cover;
}
.active-anim {
  opacity: 1;
}

.btn-slide {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #5f0b5f;
  border: 1px solid rgba(34, 34, 34, 0.287);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-slide img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}
.prev {
  top: 50%;
  left: 20px;
  transform: translateY(-60%);
}
.next {
  top: 50%;
  right: 20px;
  transform: translateY(-60%);
}

.container-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #f1f1f1;
  margin: 0 5px;
  background: #f1f1f1;
}
.dot.active {
  background: rgb(32, 32, 32);
}

Answer 1

我觉得问题出在这里

            {dataSlider.map(({imgPath, index}) => {

索引应该像这样在外面：

        {dataSlider.map(({imgPath}, index) => {

Answer 2

这有点难以猜测，没有更详细的代码，但我认为，由于您使用 import 语句在 dataSlider 文件中导入图像，因此您不需要将它们包装在额外的 需要。

试试这样：

 <img src={imgPath}

插入

<img src={require(`../Imgs/${imgPath}.jpg`)}

查看此问题以了解有关如何在反应中使用静态图像的更多详细信息： How do I reference a local image in React?

Answer 3

我找到了一个非常适合我的解决方案。当我在包含许多图像的数组上迭代/映射时，问题就出现了。

首先;

我将数组更改为：

const dataSlider = [
    {
        imgPath : require('../Imgs/IMG_0061.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_6855.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_2002.jpg') 
    },
    {
        imgPath : require('../Imgs/IMG_2003.jpg')
    },
    {
        imgPath : require('../Imgs/IMG_0096.jpg')
    },
];

export default dataSlider;

这是包含我正在映射的本地图像的数组。我用'Require'包装了每个图像路径，所以你必须这样做。

其次::

在我导入此图像以进行迭代的组件中，我将 src 属性更改为 :::

<img
    src={imgPath.default}
    alt={'image holder'}
    />

命名“src”路径时需要“默认”属性。 'alt' 可以变化。

我希望这可以帮助其他面临同样挑战的人。谢谢