NextJS新版next/image无法从public文件夹加载图片问题

切换到新版next/image组件后，确实需要调整图片的引用方式，主要有两种可行方案：

• 方案一：静态导入图片（推荐）
  直接导入public文件夹中的图片文件，将导入的对象作为src属性值传入，这是新版组件推荐的用法，无需额外配置：

import Image from 'next/image';
// 根据你的组件所在位置调整路径，比如组件在app目录下可写成 '@/public/images/logo.png'
import logo from '../public/images/logo.png';

<Image src={logo} width={90} height={45} alt="网站Logo" />

• 方案二：保留绝对路径（需配置）
  如果想继续使用旧版的绝对路径写法（如/images/logo.png），需要在next.config.js中添加图片来源的允许配置，因为新版组件默认会对图片进行优化，需明确信任本地静态资源的源：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000', // 开发环境端口，生产环境可移除该配置
        pathname: '/images/**',
      },
    ],
  },
};

module.exports = nextConfig;

配置完成后，就可以继续使用旧版的写法加载图片：

import Image from 'next/image';

<Image width={90} height={45} src="/images/logo.png" alt="网站Logo" />

另外注意：新版next/image组件要求必须添加alt属性，否则会触发控制台警告，这也是和旧版的一个差别。

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