PNG images cannot be loaded | NextJS

Solution 1:

Since your pictures are located in the public folder, and to avoid having the extra configuration to load image files, you can simply reference each image by their path in the public folder starting from the base URL (/).

function Tiles() {
    return(
        <div>
            <div className={styles.gallery}>
                <Tile title="Landscape" photo="/photos/landscape/landscape.png" location="landscape"/>
                <Tile title="Astro" photo="/photos/astro/astro.png" location="astro"/>
                <Tile title='CGI' photo="/photos/cg/cg.png" location="cgi"/>
                <Tile title="Flowers" photo="/photos/flowers/flowers.png" location="flowers"/>
            </div>
        </div>
    );
}

Check out Static File Serving for more details.