Strapi图片无法在Next.js Image组件中正常显示求助

我用Strapi做后端，在Next.js应用里展示图片，通过API拿到图片URL后放到Next.js Image组件的src属性里，但图片显示破碎。

API返回的user数据结构：

{
  "Description": "je crée votre site web",
  "Name": "@MattFreelanceWeb",
  "createdAt": "2023-05-25T08:54:43.488Z",
  "updatedAt": "2023-05-25T13:08:11.726Z",
  "publishedAt": "2023-05-25T09:22:19.524Z",
  "BgImage": {
    "data": {
      "id": 1,
      "attributes": {
        "name": "bgHero.png",
        "alternativeText": null,
        "caption": null,
        "width": 1664,
        "height": 960,
        "formats": {
          "thumbnail": {
            "name": "thumbnail_bgHero.png",
            "hash": "thumbnail_bg_Hero_8e1e23dc36",
            "ext": ".png",
            "mime": "image/png",
            "path": null,
            "width": 245,
            "height": 141,
            "size": 71.86,
            "url": "/uploads/thumbnail_bg_Hero_8e1e23dc36.png"
          },
          "small": {
            "name": "small_bgHero.png",
            "hash": "small_bg_Hero_8e1e23dc36",
            "ext": ".png",
            "mime": "image/png",
            "path": null,
            "width": 500,
            "height": 288,
            "size": 275.46,
            "url": "/uploads/small_bg_Hero_8e1e23dc36.png"
          },
          "medium": {
            "name": "medium_bgHero.png",
            "hash": "medium_bg_Hero_8e1e23dc36",
            "ext": ".png",
            "mime": "image/png",
            "path": null,
            "width": 750,
            "height": 433,
            "size": 609.12,
            "url": "/uploads/medium_bg_Hero_8e1e23dc36.png"
          },
          "large": {
            "name": "large_bgHero.png",
            "hash": "large_bg_Hero_8e1e23dc36",
            "ext": ".png",
            "mime": "image/png",
            "path": null,
            "width": 1000,
            "height": 577,
            "size": 1081.51,
            "url": "/uploads/large_bg_Hero_8e1e23dc36.png"
          }
        },
        "hash": "bg_Hero_8e1e23dc36",
        "ext": ".png",
        "mime": "image/png",
        "size": 843.61,
        "url": "/uploads/bg_Hero_8e1e23dc36.png",
        "previewUrl": null,
        "provider": "local",
        "provider_metadata": null,
        "createdAt": "2023-05-25T13:07:45.022Z",
        "updatedAt": "2023-05-25T13:07:45.022Z"
      }
    }
  }
}

组件中定义图片地址的代码：

let imageSrc = `${"http://localhost:1337"}${
  user?.BgImage.data.attributes.url
}`;

Image组件使用代码：

<Image src={imageSrc} alt={imageAlt} width={imageWidth} height={imageHeight}  className="h-screen object-cover"/>

即使直接访问完整URL http://localhost:1337/uploads/bg_Hero_8e1e23dc36.png也无法加载图片，求解决思路。

• 先验证Strapi静态文件服务是否正常
  直接在浏览器打开图片URL，如果无法加载：

  • 确认Strapi服务在1337端口正常运行
  • 检查Strapi项目的public/uploads目录下是否存在bg_Hero_8e1e23dc36.png文件
  • 打开Strapi后台→设置→角色与权限→Public角色，找到Upload内容类型，确保find权限已勾选

• 配置Next.js图片域名白名单
  Next.js的Image组件默认限制外部图片域名，必须在next.config.js中添加Strapi域名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      domains: ['localhost:1337'],
    },
  }
  
  module.exports = nextConfig
  

  若使用Next.js 13+ App Router，也可以用更精确的remotePatterns配置：

  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'http',
          hostname: 'localhost',
          port: '1337',
          pathname: '/uploads/**',
        },
      ],
    },
  }
  

• 检查Image组件的尺寸配置
  传入的width和height要匹配图片实际尺寸（API返回的1664/960），或者使用fill属性配合父容器定位（适合全屏背景图场景）：

  <div className="relative h-screen">
    <Image 
      src={imageSrc} 
      alt={imageAlt} 
      fill 
      className="object-cover"
    />
  </div>
  

• 验证图片URL的正确性
  在组件中添加console.log(imageSrc)，确认生成的URL没有拼接错误，避免可选链导致的undefined值。

• 清除缓存

  • 删除Next.js项目的.next文件夹，重启开发服务器
  • 用浏览器无痕模式测试，或手动清除浏览器缓存

内容的提问来源于stack exchange，提问作者Matt Freelance Web