next.js 添加常量滑块后未显示图像......如此混乱

y1aodyip 于 2023-01-08 发布在其他

关注(0)|答案(1)|浏览(125)

所以我一直在遵循一个教程，并试图教自己next.js与懒惰加载滑块和tailwindcss..我是一个初学者，但我做了电子商务网站和东西来教自己..但这个教程一直很棒，直到这！但我已经尝试了一切我知道和谷歌它的每一种方式来尝试解决这个问题！！我的图像显示完美之前，我添加了- const setCurrent到如果！阵列
如果我删除的图像显示备份...我很困惑，我经历了一切-而且“画廊”甚至消失了，一旦我添加了这一节，我把它都放在github上，以防有人可以看看它来帮助我？？https://github.com/Jessica19882/firebird
我已经删除了const当前到！数组部分和图像显示备份我已经尝试重写它作为另一个职位说，但没有工作，我检查并放大到视频教程，以确保一切都是正确的，它是...我已经检查了所有其他页面index.js app.js和东西，以确保我有它就像他的，它是！
slider.js

import { SliderData } from './SliderData'
import React, { useState } from 'react'
import Image from 'next/image'

const Slider = ({ slides }) => {
  const [current, setCurrent] = useState(0)
  const length = slides?.length

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1)
  }
  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1)
  }

  if (!Array.isArray(slides) || slides.length <= 0) {
    return null
  }

  return (
    <div id='gallery'>
      <h1>Gallery</h1>
      <div>
        {SliderData.map((slide, index) => {
          return (
            <div
              key={index}
              className={
                index === current
                  ? 'opacity-[1] ease-in duration-1000'
                  : 'opacity-0'
              }>
              <Image
                src={slide.image}
                alt='/'
                width='1440'
                height='600'
                style={{ objectFit: 'cover' }}
              />
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default Slider

index.js

import Head from 'next/head'
import Hero from '../components/Hero'
import Slider from '../components/Slider'
import SliderData from '../components/SliderData'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Firebird Sounds</title>
        <meta name='description' content='firebird sounds' />
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <Hero
        heading='Firebird Sounds - Audio & Video Distribution'
        message='Audio and Video Distribution with a menu of 
Services: Marketing, PR, Global rights management and creativity'
      />
      <Slider Slides={SliderData} />
    </div>
  )
}

SliderData.js

export const SliderData = [
  {
   image:
      'https://images.unsplash.com/photo-1466428996289-fb355538da1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fG11c2ljJTIwZGlzdHJpYnV0aW9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
  },
  {
    image: '/images/FirebirdSounds.jpg',
  },
  {
    image:
      'https://images.unsplash.com/photo-1460667262436-cf19894f4774?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjZ8fG11c2ljJTIwZGlzdHJpYnV0aW9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
  },
  {
    image: '/images/guitar.jpg',
  },
  {
    image: '/images/firebird.png',
  },
]

app.js

import Navbar from '../components/Navbar'
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Navbar />
      <Component {...pageProps} />
    </>
  )
}

https://www.youtube.com/watch?fbclid=IwAR2jl5qYoIsaFZQ26MumbFcCYv5t3eYxcqVKgm4xAsxilhEkAzSNoUB0fzE&v=HVyct9EUNP8&feature=youtu.be

next.js

来源：https://stackoverflow.com/questions/75013040/images-not-showing-after-adding-const-slider-so-confused