Next.js中使用next-images加载public目录PNG出现unsupported file type错误怎么办

问题原因 #

• 核心冲突：Next.js v10及以上版本已经内置了静态图片资源的处理能力，额外安装的next-images包会和Next.js内置的静态资源加载规则冲突，导致图片文件解析失败抛出类型错误。
• 路径使用错误：存放在public目录下的静态资源不需要通过相对路径import引入，Next.js会自动将public目录下的文件映射到服务根路径。

解决步骤 #

步骤1：卸载冗余依赖并重置配置 #

首先卸载next-images包：

npm uninstall next-images
# 或者使用yarn
yarn remove next-images

之后删除next.config.js中和next-images相关的配置即可，其余自定义配置可以正常保留。

步骤2：修改组件内图片引用方式 #

public目录下的/assets/images/delivery-boy.png可以直接通过绝对路径引用，不需要提前import：

若使用原生<img>标签：

import React from 'react'
import Image from 'next/image'

const MedicalStoreScreen = () => {
    return (
        <div className="med-store-screen" >
            <div className="section-title-container">
                <div className="heading">Medical Store</div>
                <div className="sub-heading">medicine home delivery</div>
            </div>
            <div className="med-store-info-container">
                <div className="img-container">
                    <img src="/assets/images/delivery-boy.png" alt="delivery boy" />
                </div>
                <div className="content-container">
                    <div className="content">24/7 Delivery in 30 minutes</div>
                    <div className="content">Upto 30% discount</div>
                </div>
            </div>
        </div>
    )
}

export default MedicalStoreScreen

若使用Next.js内置<Image>组件（更推荐，自带图片压缩、懒加载等优化能力）：

import React from 'react'
import Image from 'next/image'

const MedicalStoreScreen = () => {
    return (
        <div className="med-store-screen" >
            <div className="section-title-container">
                <div className="heading">Medical Store</div>
                <div className="sub-heading">medicine home delivery</div>
            </div>
            <div className="med-store-info-container">
                <div className="img-container">
                    <Image 
                      src="/assets/images/delivery-boy.png" 
                      alt="delivery boy"
                      width={300}
                      height={300}
                    />
                </div>
                <div className="content-container">
                    <div className="content">24/7 Delivery in 30 minutes</div>
                    <div className="content">Upto 30% discount</div>
                </div>
            </div>
        </div>
    )
}

export default MedicalStoreScreen

步骤3：重启开发服务 #

修改完成后重启Next.js开发服务，即可正常加载图片。

内容的提问来源于stack exchange，提问作者Ankit Sanghvi