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

Question

how to display single image randomly? I have created an array of objects where the images are been added now I need to display those images randomly but one at once and it will change in the next reload.

 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

use this code

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

use Math.floor() , you can see the docs on this link , I hope this would be helpful. thanks

 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

One way would be to generate a random number between 0 and the last index of your image array. Ideally you'd store it in a useState , so that you can change it when you want (say for instance you have a button that says "get random GIF").

You would need a function like this one to generate the randomIdx :

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

The way to create such functions is well explained in here .

You would then put in your JSX an <img /> tag, whose src attribute is stored in the src property of the object at gifGallery[randomIdx] .

 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> </> ) }

you have a working exemple in this React Playground