使用Next Js在Button Click上循环浏览一组图像

Question

我有一个包含六张图片的文件夹，当点击“更新个人资料图片”按钮时，我想循环浏览这些图片。我在Next Js中遇到了一些道具问题，如果有任何帮助，我将不胜感激。

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

Answer 1

对于标记图像，您必须使用宽度和高度，如果从公共文件夹获取数据，则不使用/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

Answer 2

好的，经过几个小时的研磨，这是我想出的可行的解决方案。

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