Looping Through a set of Images on Button Click with Next Js

user_14615188 0
Viewed 824

I have a folder of six images that I would like to loop through when the "update profile picture" button is clicked. I've been having some issues with props in Next Js and any help would be greatly appreciated.

import styles from '../styles/ProfileShowcase.module.scss'
import Image from 'next/image'
import proPic from '../public/img/avatars/mask_avatars_four.png'
import GameLog from '../pages/Logs.js'
import useUser from '../lib/useUser';
import one from '/public/img/avatars/mask_avatars_one.png'
import two from '/public/img/avatars/mask_avatars_two.png'
import three from '/public/img/avatars/mask_avatars_three.png'
import four from '/public/img/avatars/mask_avatars_four.png'
import five from '/public/img/avatars/mask_avatars_five.png'
import six from '/public/img/avatars/mask_avatars_six.png'

const ProfileShowcase = () => {

  const profileLoop = () => {

        let avatars = [{one}, {two}, {three}, {four}, {five}, {six}];
        var keys = Object.keys(avatars);
        let randomMask = avatars[keys[ keys.length * Math.random() << 0]];
        console.log(randomMask);
        
    }
  
    return (
        <>
          
          <div className={styles.top_container}>

                <div className={styles.img_wrap}>
                    <Image src={looped image src goes here} />
                    <button className={styles.btn_update} onClick={profileLoop}>update profile picture</button>
                </div>
          </div>

          {/* <div className={styles.bottom_container}>
            <GameLog />
          </div> */}

          
          
        </>
    )
}

export default ProfileShowcase
next.js reactjs
2 Answers

Okay so after a couple of hours grinding here is the working solution i came up with.

function importAll(r) 
{
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const missingAvatars = importAll(require.context('../public/img/avatars', false, /\.(png|jpe?g|svg)$/));

const ProfileShowcase = () => {
    
    const {user, mutateUser} = useUser();
    const [photos, setPhotos] = useState([''])


    const profileLoop = (res) => {

        var keys = Object.keys(missingAvatars);
        let maskImage = missingAvatars[keys[ keys.length * Math.random() << 0]];
        setPhotos(<Image src={maskImage.default.src} alt='card pix' width='200' height='200'></Image>)
        console.log(maskImage)
        return; 
    }
return (
        <>
          
          <div className={styles.top_container}>

                <div className={styles.img_wrap}>
                    {photos}
                    <button className={styles.btn_update} onClick={profileLoop} >change avatar</button>
                </div>
          </div>
        </>
)
user_146151880

for tag Image you have to use width and height and if you get data from public folder you don't use /public

import styles from '../styles/ProfileShowcase.module.scss'
import Image from 'next/image'
import proPic from '/img/avatars/mask_avatars_four.png'
import GameLog from '../pages/Logs.js'
import useUser from '../lib/useUser';

const ProfileShowcase = () => {
  
    return (
        <>
          
          <div className={styles.top_container}>

                <div className={styles.img_wrap}>
                    <Image src={proPic} width={200} height={200} />
                    <button className={styles.btn_update}>update profile picture</button>
                </div>

          </div>
        </>
    )
}

export default ProfileShowcase
user_108355610
Related