¿Cómo mostrar una sola imagen al azar? Creé una serie de objetos donde se agregaron las imágenes. Ahora necesito mostrar esas imágenes al azar, pero una a la vez y cambiará en la próxima recarga.
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> </> ) }usa este código
function getRandomImage(arr) { const length = arr.length; const randomIndex = Math.floor(length * Math.random()) return arr[randomIndex] }puede usar la función aleatoria para obtener el índice aleatorio de su matriz
gifGallery[Math.random() * gifGallery.length].srcYou 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> </> )