映射到文件夹中的所有图像

Question

我是 nextjs 的新手，我遇到了一些问题..

我的 public/imgs/myfolder 中有 30 张图片，我想以最简单的方式导入它们，也就是说，导入所有 30 张图片，而不是按每个名称导入...

我的代码是这样的：

import Image from 'next/image'

import album_01 from '../../public/imgs/myfolder/album-01.png'
import album_02 from '../../public/imgs/myfolder/album-02.png'
import album_03 from '../../public/imgs/myfolder/album-03.png'
import album_04 from '../../public/imgs/myfolder/album-04.png'
import album_05 from '../../public/imgs/myfolder/album-05.png'
import album_06 from '../../public/imgs/myfolder/album-06.png'
import album_07 from '../../public/imgs/myfolder/album-07.png'
import album_08 from '../../public/imgs/myfolder/album-08.png'
import album_09 from '../../public/imgs/myfolder/album-09.png'
import album_10 from '../../public/imgs/myfolder/album-10.png'
import album_11 from '../../public/imgs/myfolder/album-11.png'
import album_12 from '../../public/imgs/myfolder/album-12.png'
import album_13 from '../../public/imgs/myfolder/album-13.png'
import album_14 from '../../public/imgs/myfolder/album-14.png'
import album_15 from '../../public/imgs/myfolder/album-15.png'
import album_16 from '../../public/imgs/myfolder/album-16.png'
import album_17 from '../../public/imgs/myfolder/album-17.png'
import album_18 from '../../public/imgs/myfolder/album-18.png'
import album_19 from '../../public/imgs/myfolder/album-19.png'
import album_20 from '../../public/imgs/myfolder/album-20.png'
import album_21 from '../../public/imgs/myfolder/album-21.png'
import album_22 from '../../public/imgs/myfolder/album-22.png'
import album_23 from '../../public/imgs/myfolder/album-23.png'
import album_24 from '../../public/imgs/myfolder/album-24.png'
import album_25 from '../../public/imgs/myfolder/album-25.png'
import album_26 from '../../public/imgs/myfolder/album-26.png'
import album_27 from '../../public/imgs/myfolder/album-27.png'
import album_29 from '../../public/imgs/myfolder/album-29.png'
import album_30 from '../../public/imgs/myfolder/album-30.png'
import album_31 from '../../public/imgs/myfolder/album-31.png'
import album_32 from '../../public/imgs/myfolder/album-32.png'
import album_33 from '../../public/imgs/myfolder/album-33.png'
import album_34 from '../../public/imgs/myfolder/album-34.png'

import styles from './styles.module.scss';

/**
 * @function Album
 * @access Public
 * @description Component
 */
 export function Album() {
    const allImages = [
        album_01, album_02, album_03, album_04, album_05, album_06, album_07, album_08, album_09, album_10, album_11, album_12, album_13, album_14, album_15, album_16, album_17, album_18, album_19, album_20, album_21, album_22, album_23, album_24, album_25, album_26, album_27, album_29, album_30, album_31, album_32, album_33, album_34
    ];

    const imgWidth = 5;

    return (
        <section className={`ececec`}>
            <div className={styles.horizontalScroll}>
                <div className="d-flex justify-content-between" style={{ width: `${(imgWidth + 0.625) * allImages.length}rem` }}>
                    {allImages.map((item, index) => {
                        <Image className={styles.img_contractor} src={item} width="120" height="120" alt={`Album ${index + 1}`} objectFit="cover" />
                    })}
                    <Image className={styles.img_contractor} src={album_01} width="120" height="120" alt={`Album 01`} objectFit="cover" />
                </div>
            </div>
        </section>
    );
 }

问题是只有这张图显示

<Image className={styles.img_contractor} src={album_01} width="120" height="120" alt={`Album 01`} objectFit="cover" />

我错过了什么？

Answer 1

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

const images = importAll(require.context('../../public/imgs/myfolder', false, /\.(png|jpe?g|svg)$/));

<Image className={styles.img_contractor} src={images.album01} width="120" height="120" alt={`Album 01`} objectFit="cover" />

我认为你可以做这样的事情。