我是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" />
我错过了什么?