webpack - PNG images cannot be loaded | NextJS

Question

I have a website serving photos in a gallery format that I've created using Next.js. I have all my images stored in /public/photos/ grouped into subfolders, and they are imported where they are needed (see below).

The main page consists of a grid (the tiles component) of individual tiles (the tile component) with a photo background and a title. The photo is imported into tiles.tsx and passed to the tile component as a prop, so I can add more tiles easily.

When I compile this project with npm run dev, I get this error:

error - ./public/photos/astro/astro.png
Module parse failed: Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

My webpack config is as follows:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    module: {
      rules: [
        {
          test: /.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    }
};

tiles.tsx is as follows:

import React from "react";
import Tile from "./tile";
import styles from "@styles/tiles.module.css";


import landscape from "../public/photos/landscape/landscape.png";
import astro from "../public/photos/astro/astro.png";
import cgi from "../public/photos/cg/cg.png";
import flowers from "../public/photos/flowers/flowers.png";

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

export default Tiles;

tile.tsx is as follows:

import styles from '@styles/tile.module.css'

const Tile = (props) => {
    return(
        <div>
            <a className={styles.linkWrapper} href={props.location}>
                <div className={styles.imageContainer}>
                        <img className={styles.image} src={props.photo}/>
                    <div className={styles.title}>{props.title}</div>
                </div>
            </a>
        </div>
    );
}

export default Tile;

I believe I have my webpack correctly configured to load these files. This error only occurs with png images, jpegs and jpgs pose no issue. I have tried to resolve this with next-images, but was unsuccessful.

Any help if appreciated. I am happy to provide extra code if necessary.

Answer 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.