Next.js中无法从public/assets文件夹在浏览器查看图片

1. 修正图片导入方式 #

你当前使用了命名导入{ ProcessImg }，但本地图片文件在Next.js中是默认导出，应该改为默认导入：

import Image from "next/image";
import React from "react";
// 去掉大括号，使用默认导入
import ProcessImg from "../public/assets/process_img.png";

2. 验证图片路径与文件存在性 #

• 确认../public/assets/process_img.png路径正确：比如你的组件文件如果在src/components/xxx.js，根目录下的public/assets/process_img.png对应的相对路径就是正确的。
• 直接在浏览器地址栏访问http://localhost:3000/assets/process_img.png，如果无法打开，说明：
  • 图片文件不存在或路径写错（注意大小写，Linux/macOS区分文件名大小写）
  • 图片文件损坏，尝试重新替换图片文件

3. 调整Image组件的尺寸配置 #

Next.js的Image组件对尺寸配置有严格要求，根据你的布局需求调整：

方式一：使用固定尺寸（匹配图片实际比例） #

如果要固定100x100的尺寸，确保图片本身的宽高比例和设置一致，保留你的className让图片自适应：

<Image
  className="lg:w-3/5 md:w-1/2 object-cover object-center rounded-lg md:mt-0 mt-12"
  src={ProcessImg}
  height={100}
  width={100}
  alt="step"
/>

方式二：自适应容器（推荐用于响应式布局） #

如果要让图片填充父容器，使用fill属性并给父容器设置相对定位：

<div className="relative lg:w-3/5 md:w-1/2 md:mt-0 mt-12 h-64">
  <Image
    src={ProcessImg}
    fill
    className="object-cover object-center rounded-lg"
    alt="step"
  />
</div>

4. 检查Next.js版本适配 #

• 如果你使用Next.js 13+ App Router，确保next.config.js中没有错误的图片配置（本地public图片不需要配置images.domains）。
• 如果你使用Next.js 12及以前的Pages Router，可尝试添加layout="responsive"属性：

<Image
  className="lg:w-3/5 md:w-1/2 object-cover object-center rounded-lg md:mt-0 mt-12"
  src={ProcessImg}
  height={100}
  width={100}
  layout="responsive"
  alt="step"
/>

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