Next.js中API返回图片无法加载，新手求助排查问题

我是Next.js新手，当前遇到图片无法加载的问题，图片由Node.js搭建的API提供，不清楚问题所在。问题截图如下：

相关代码 #

主组件与数据获取代码 #

const ServicesPage = ({ posts }) => {
  return (
    <main>
      <div className="main-page-services-cards">
        {posts.map((card, key) => (
           <div key={card.id} className="service-card">
             <Link href={`/services/${card.id}`}>
              <a>
               <div className="card-img">
                <Image src={card.img} alt="Services" />
               </div>
               <h4>{card.header}</h4>
               <p>{card.p}</p>
              </a>
            </Link>
          </div>
        ))}
      </div>
    </main>
  );
};

export default ServicesPage;

export async function getServerSideProps() {
  const res = await fetch("http://localhost:3000/api/servicesApi/");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

API接口代码 #

import { servicesData } from "../../../data";

export default function handler(req, res) {
  res.status(200).json(servicesData);
}

数据文件data.js代码 #

import icon1 from "./public/images/window-alt.svg";

export const servicesData = [
  {
    img: icon1,
    header: "Saytların yaranması",
    p: "Ex similique necessitatibus cumque. Autem velit velit ",
    id: 1,
    slug: "saytlarin-yaranmasi",
  },
 
]

问题原因与解决方法 #

核心问题：在data.js中直接导入图片文件并通过API返回时，Next.js的Image组件无法识别这种导入后的模块对象（实际是webpack处理后的路径标识，并非可直接访问的URL）。API返回该对象后，前端拿到的是序列化后的无效数据，导致图片加载失败。

解决步骤： #

1. 修改data.js，存储图片的相对路径而非导入模块
   将图片路径改为字符串形式，直接指向public目录下的资源路径（public是Next.js默认的静态资源目录，文件可通过根路径直接访问）：

   export const servicesData = [
     {
       img: "/images/window-alt.svg",
       header: "Saytların yaranması",
       p: "Ex similique necessitatibus cumque. Autem velit velit ",
       id: 1,
       slug: "saytlarin-yaranmasi",
     },
   ]
   

2. 可选：配置Image组件域名（部署场景）
   如果后续部署后API与前端不在同一域名，需要在next.config.js中添加域名白名单，本地开发时localhost默认允许，可暂不配置：

   module.exports = {
     images: {
       domains: ['your-api-domain.com'],
     },
   }
   

3. 验证API返回内容
   修改后API返回的img字段为有效静态资源路径，前端Image组件可正确解析并加载图片。

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