部署在Firebase的NextJS应用中使用PNG图片的问题求助

一、本地图片仅显示alt文本的排查方案 #

1. 检查图片存放路径 #

• 本地图片必须放在项目根目录的public文件夹下，比如public/assets/logo.png，引用时路径直接写/assets/logo.png（不需要包含public）。
• 注意路径大小写：Windows系统不区分大小写，但Firebase Hosting运行在Linux环境下，路径大小写必须完全匹配，比如Logo.png和logo.png会被视为不同文件。

2. 确认Image组件必填属性 #

• Next.js的<Image>组件必须指定width和height，或者使用fill属性配合父容器的相对定位样式，否则图片无法渲染。示例代码：

  // 固定尺寸写法
  <Image
    src="/assets/logo.png"
    alt="网站Logo"
    width={200}
    height={80}
  />
  
  // 自适应尺寸写法（需父容器设置position: relative）
  <div style={{ position: 'relative', width: '100%', height: 200 }}>
    <Image
      src="/assets/banner.png"
      alt="首页横幅"
      fill
      objectFit="cover"
    />
  </div>
  

3. 调试请求状态 #

打开浏览器开发者工具的「Network」标签，查看图片请求的状态码：

• 若为404：说明路径错误，重新核对图片存放位置和引用路径。
• 若为CORS相关错误：需配置Firebase Storage的CORS规则（仅当图片存放在Firebase Storage时需要）。

二、关于akamaiLoader的疑问 #

akamaiLoader是Next.js为Akamai CDN提供的专用加载器，你部署在Firebase平台，完全不需要使用它。如果需要自定义加载器，应该针对Firebase的存储服务来编写：

Firebase Storage自定义加载器示例 #

如果将图片存放在Firebase Storage，可编写以下加载器：

function firebaseStorageLoader({ src, width, quality }) {
  // 替换[你的存储桶ID]为实际的Firebase存储桶ID
  const bucketId = "your-firebase-storage-bucket-id";
  // 对图片路径进行URI编码，避免特殊字符问题
  const encodedSrc = encodeURIComponent(src);
  return `https://firebasestorage.googleapis.com/v0/b/${bucketId}/o/${encodedSrc}?alt=media&w=${width}&q=${quality || 75}`;
}

使用方式：

<Image
  src="path/to/your/image.png" // Firebase Storage中图片的路径（不含存储桶ID）
  alt="图片描述"
  width={500}
  height={300}
  loader={firebaseStorageLoader}
/>

三、Next.js全局配置补充 #

如果使用Firebase Storage托管图片，需要在next.config.js中添加允许的域名，避免Next.js的图片安全限制：

module.exports = {
  images: {
    domains: ["firebasestorage.googleapis.com"],
  },
};

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