Image 无法加载PNG图像| NextJS

我有一个网站，提供我用Next.js创建的画廊格式的照片。我将所有图像存储在

/public/photos/

中，并将它们分组到子文件夹中，然后在需要的地方导入它们（见下文）

主页由带有照片背景和标题的单个平铺（平铺组件）的网格（平铺组件）组成。照片被导入到

tiles.tsx

中，并作为道具传递到

tile

组件，因此我可以轻松添加更多的tiles

当我使用

npm-run-dev

编译此项目时，出现以下错误：

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.

我的网页配置如下：

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

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

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;

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;

tiles.tsx

如下所示：

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

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

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;

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;

我相信我已经正确配置了我的网页来加载这些文件。此错误仅发生在png图像中，JPEG和JPG不会引起任何问题。我曾试图解决这个问题，但没有成功

---

任何帮助，如果感谢。如果有必要，我很乐意提供额外的代码。

因为您的图片位于

公共文件夹中，为了避免通过代码加载图像文件而添加额外配置，您只需从基本URL（
/
）开始按文件夹中的路径引用每个图像即可

function Tiles（）{
返回(
);
}
我不知道为什么，但这很有效。该网站现在可以完美加载。非常感谢你！