React中如何添加图片？localhost本地图片无法显示问题求助

我在Next.js项目中添加图片时遇到加载失败的问题，相关代码和信息如下：

图片容器代码 #

<div>
  <Image src={devsimone} />
</div>

导入代码 #

import { BsFillMoonStarsFill } from "react-icons/bs";
import { AiFillLinkedin, AiFillGithub, AiOutlineMail } from "react-icons/ai";
import Image from "next/image";
import devsimone from "../public/public/portphoto.png";

目录结构说明 #

图片文件位于项目根目录的public文件夹下，文件名为portphoto.png。

已尝试的排查步骤 #

• 移除图片后重新添加
• 直接从目录复制粘贴图片路径
• 在目录内调整图片位置

解决方法 #

1. 修正导入路径
   从目录结构来看，导入路径多写了一层public/，根据组件所在位置调整路径：

   • 若组件在app/components/目录下，正确路径为../../public/portphoto.png
   • 若组件在app/目录下，正确路径为../public/portphoto.png

2. 补充Next.js Image组件必填属性
   Next.js的Image组件需要指定尺寸或布局属性，否则无法正常渲染。示例：

   // 指定固定宽高
   <Image src={devsimone} width={200} height={200} alt="个人头像" />
   
   // 或使用fill配合容器样式实现自适应
   <div style={{ position: "relative", width: "100%", height: 300 }}>
     <Image src={devsimone} fill objectFit="cover" alt="个人头像" />
   </div>
   

3. 验证图片文件有效性
   确认图片文件未损坏，文件名及扩展名（如.png）正确无误。

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