如何从对象数组中随机显示仅一张 1 图像

Question

如何随机显示单张图片？ 我创建了一系列对象，其中添加了图像，现在我需要随机显示这些图像，但一次显示一个，它会在下次重新加载时发生变化。

const index= () => {
  let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]
  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    {
     what should be the logic here?????
    }
   </div>
   </>
  )
}

Answer 1

使用此代码

function getRandomImage(arr) {
  const length = arr.length;
  const randomIndex = Math.floor(length * Math.random())
  return arr[randomIndex]
}

Answer 2

You can get a random value from an array of objects and use it in your return method.

let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
  ]
  var randomObject = gifGallery[Math.floor(Math.random() * gifGallery.length)];
  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    <image src={randomObject.src} alt={randomObject.value} />
   </div>
   </>
  )

Answer 3

使用

Math.floor()

，您可以在此链接上查看文档，我希望这会有所帮助。谢谢

let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]
  
const randomImage = Math.floor(Math.random() * gifGallery.length)
console.log(randomImage)

const index= () => {
  let gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
   

  ]

  const randomImage = Math.floor(Math.random() * gifGallery.length)

  return (
   <>
   <h1>Gif Gallery</h1>
   <div>
    <img src={gifGallery[randomImage].src} />
   </div>
   </>
  )
}

Answer 4

一种方法是生成一个介于 0 和图像数组的最后一个索引之间的随机数。理想情况下，您可以将其存储在

useState

中，以便您可以在需要时更改它（例如，您有一个显示“获取随机 GIF”的按钮）。

您需要一个像这样的函数来生成

randomIdx

:

const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)

创建此类函数的方法在here中有很好的解释。

然后，您可以在 JSX 中放入一个

<img />

标签，其

src

属性存储在

gifGallery[randomIdx]

处对象的 src 属性中。

  const gifGallery=[
    {
      src:'./Images/1.gif',
      value:1
    },
    {
      src:'./Images/2.gif',
      value:2
    },
    {
      src:'./Images/3.gif',
      value:3
    },
    {
      src:'./Images/4.gif',
      value:4
    },
 
  ]

const getRandomIdx = ()  => Math.floor(Math.random() * gifGallery.length)

const App = () => {
    const [randomIdx, setRandomIdx] = useState(getRandomIdx())
        
    return (
           <>
               <h1>Gif Gallery</h1>
            <div>
                <img src={gifGallery[randomIdx].src} />
            </div>
            <p>Idx : {randomIdx}</p>
            <button onClick={() => setRandomIdx(getRandomIdx())}>
                get another random one
            </button>
        </>
    )
}

你在 这个 React Playground

中有一个工作示例