reactjs 使用Vite在NextJS徽标轮播中循环导入的图像

83qze16e 于 2023-05-28 发布在 React

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

我期待建立一个自动标识在NextJS的排序轮播。如果有什么不同的话，我会在vite上开发下一个应用程序。我已经导入了不同的图像，并分配给他们的价值观，如Logo1，Logo2等，我想有一个数组的图像周期后，一组时间。

import React from 'react'
import Image from 'next/image'
import { useRef } from 'react'
import Logo1 from '../public/Assets/random1.png'
import Logo2 from '../public/Assets/random2.png'
import Logo3 from '../public/Assets/random3.png'

const LogoCarousel = () => {

  const Images1 = [Logo1, Logo2, Logo3];
  const Slot1 = useRef();

  let index = 0;

  const change = () => {
    Slot1.src = Images1[index];
    index > 1 ? index = 0 : index++;
  }

  window.onload = () => {
    setInterval(change, 3000);
  }

  return (
    <div className='logo-carousel'>
      <div className="logo-slot1" useRef={Slot1} >
        <Image src={Slot1} width={50} height={50} />
      </div>
    </div>
    
  )
}

export default LogoCarousel

我已经浏览了下一个文档以及react，但仍在挣扎。我试着有一个单独的图像文件与所有资产导入，并试图从他们拉到没有运气也。还尝试使用'Images1'作为图像标记src。
任何帮助都非常感谢

reactjs

来源：https://stackoverflow.com/questions/76330262/cycle-through-imported-images-in-nextjs-logo-carousel-with-vite

1条答案

按热度按时间

wh6knrhe1#

答案取决于Next.js版本以及组件在文件结构中的存储位置。
一个解决方案，应该工作，无论上述情况，可能是不导入您的图像的方式，你正在做的，而是依靠的事实，即文件在public目录是暴露和可通过URL。
这意味着您可以像“正常”一样使用next/Image的src属性。

<Image src="/Assets/random1.png" width={50} height={50} />

在查看组件时，会想到另外两件事：
1.它正在访问window对象。如果您尝试服务器呈现组件，这可能会导致问题，如果您使用Next.js，您可能会在某个时候这样做
1.在这里使用useRef并不完全合理。如果你想学习如何使用它，请查看react docs。
对于您的用例，请考虑对代码进行以下更改：

const images = ["random1.png", "random2.png", "random3.png"];

const LogoCarousel = () => {
  const [index, setIndex] = useState(0)
  
  useEffect(() => {
    setInterval(() => setIndex(index+1) , 3000);
  },[])

  return (
    <div className='logo-carousel'>
      <div className="logo-slot1" useRef={Slot1} >
        <Image src={`/Assets/${images[index]}`} width={50} height={50} />
      </div>
    </div>
    
  )
}

你可能不想只是复制粘贴这个，因为我写这个没有尝试。但是请注意，在不使用window和useRef的情况下，使用useState和useEffect也是可能的

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 使用Vite在NextJS徽标轮播中循环导入的图像

1条答案

相关问题

热门标签

最新问答