Hello, I am new to NextJS and encountering some issues. I have a folder in my public directory containing 30 images that I want to import all at once in the simplest way possible, without having to import each image individually by name. Here is the current code snippet:
import Image from 'next/image'
// Importing all 30 images
...
import styles from './styles.module.scss';
/**
* @function Album
* @access Public
* @description Component
*/
export function Album() {
const allImages = [
// List of imported images
];
const imgWidth = 5;
return (
& lt; 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) =& gt; {
<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>
);
}The issue is that only one image is showing on the page:
<Image className={styles.img_contractor} src={album_01} width="120" height="120" alt={`Album 01`} objectFit="cover" />
I'm unsure of what I might be missing here. Any advice or suggestions are appreciated!