无法加载 PNG 图片 |下一个JS [英] PNG images cannot be loaded | NextJS
问题描述
我有一个使用 Next.js 创建的以图库格式提供照片的网站.我将存储在 /public/photos/
中的所有图像分组到子文件夹中,并将它们导入到需要的地方(见下文).
主页由带有照片背景和标题的单个图块(图块组件)的网格(图块组件)组成.照片被导入到 tiles.tsx
并作为 prop 传递给 tile
组件,所以我可以轻松添加更多的瓷砖.
当我用 npm run dev
编译这个项目时,我得到这个错误:
错误 - ./public/photos/astro/astro.png模块解析失败:意外字符 ' ' (1:0)您可能需要一个合适的加载器来处理此文件类型,目前没有配置加载器来处理此文件.
我的 webpack 配置如下:
const webpack = require('webpack');const path = require('path');模块.出口 = {模块: {规则: [{测试:/\.(png|jpe?g|gif)$/i,用: [{加载器:'文件加载器',},],},],}};
tiles.tsx
如下:
从反应"导入反应;从./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><div className={styles.gallery}><Tile title="风景";照片={风景}位置=风景"/><Tile title=Astro"photo={astro} location=astro"/><Tile title='CGI' photo={cgi} location=cgi"/><Tile title=鲜花"照片={花}位置=花"/>
);}导出默认瓷砖;
tile.tsx
如下:
从'@styles/tile.module.css'导入样式const Tile = (props) =>{返回(<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>
</a>