无法加载 PNG 图片 |NextJS [英] PNG images cannot be loaded | NextJS

问题描述

我有一个网站以画廊格式提供我使用 Next.js 创建的照片.我将存储在 /public/photos/ 中的所有图像分组到子文件夹中，并将它们导入到需要它们的位置(见下文).

主页由带有照片背景和标题的单个图块(图块组件)的网格(图块组件)组成.照片被导入到 tiles.tsx 并作为道具传递给 tile 组件，这样我就可以轻松添加更多的瓷砖.

当我用 npm run dev 编译这个项目时，我得到这个错误:

错误 - ./public/photos/astro/astro.png模块解析失败:意外字符 ' ' (1:0)您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件.

我的 webpack 配置如下:

const webpack = require('webpack');常量路径 = 要求('路径');模块.exports = {模块: {规则:[{测试:/.(png|jpe?g|gif)$/i,利用: [{加载器:'文件加载器'，},],},],}};

tiles.tsx如下:

从react"导入反应；从./tile"导入瓷砖；从@styles/tiles.module.css"导入样式；从../public/photos/landscape/landscape.png"导入风景；从../public/photos/astro/astro.png"导入 astro；从../public/photos/cg/cg.png"导入cgi；从../public/photos/flowers/flowers.png"导入鲜花；功能瓷砖(){返回(
<div 类名={styles.gallery}><平铺标题=风景"照片={风景} 位置=风景"/><平铺标题=Astro"照片={astro} 位置=astro"/><平铺标题='CGI'照片={cgi}位置=cgi"/><平铺标题=花"照片={花} 位置=花"/></div></div>);}导出默认瓷砖；

tile.tsx如下:

从 '@styles/tile.module.css' 导入样式const Tile = (props) =>{返回(
<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>);}导出默认平铺；

我相信我的 webpack 已正确配置为加载这些文件.此错误仅发生在 png 图像、jpegs 和 jpgs 没有问题.我尝试使用 next-images 解决此问题，但没有成功.

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

解决方案

由于您的图片位于public文件夹中，为了避免加载图片文件的额外配置，您可以简单参考每个图像在 public 文件夹中的路径从基本 URL (/) 开始.

function Tiles() {返回(
<div 类名={styles.gallery}><平铺标题=风景"照片=/photos/landscape/landscape.png"位置=风景"/><平铺标题=Astro"照片=/photos/astro/astro.png"位置=天文"/><平铺标题='CGI'照片="/photos/cg/cg.png"位置=cgi"/><平铺标题=花"照片=/photos/flowers/flowers.png"位置=花"/></div></div>);}

查看静态文件服务了解更多详情.p>

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.

解决方案

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.

这篇关于无法加载 PNG 图片 |NextJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！