Next.js中next/image加载WebP格式API图片显示异常求助

问题背景 #

用Next.js开发应用时，API返回的产品图片是WebP格式，已经在next.config.js里配置了对应格式和域名，但图片还是显示破碎，alt文本也无法正常展示。

配置文件（next.config.js） #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    formats: ['image/webp', 'image/avif'],
    domains: [
      "mks-sistemas.nyc3.digitaloceanspaces.com",
    ]
  }
};

export default nextConfig;  

组件代码（ProductCard） #

import Image from "next/image"

export const ProductCard = ({ product }: IProductsCardProps): JSX.Element => {
  return (
    <li>
      <div>
        <Image src={product.img} alt={product.name} width={100} height={90} />
        {/* <img src={product.img} alt="" /> */}
      </div>
      <div>
        <h2>{product.name}</h2>
        <p>{product.description}</p>
      </div>
      <span>{product.price}</span>
    </li>
  )
}        

排查与解决步骤 #

• 先确认图片URL本身没问题：把product.img里的URL复制到浏览器地址栏直接打开，看图片能不能正常加载。如果打不开，说明API返回的URL本身有问题，得去查API接口或者CDN的配置。
• 核对域名匹配度：Next.js的Image组件会严格校验域名，要确保product.img的域名和next.config.js里domains数组的项完全一致，比如URL必须是https://mks-sistemas.nyc3.digitaloceanspaces.com/xxx.webp这种，不能有子域名或者额外路径的差异。
• 临时禁用图片优化测试：给Image组件加个unoptimized属性，关掉Next.js的图片优化功能，看看图片能不能显示：

  <Image 
    src={product.img} 
    alt={product.name} 
    width={100} 
    height={90} 
    unoptimized 
  />
  

  如果这时候图片正常，说明是图片优化流程出了问题，可以试试升级Next.js到稳定版本。
• 检查容器样式：确保包裹Image的div没设置overflow: hidden、display: none这类会隐藏图片的样式，也不能有错误的宽高设置导致图片被挤压或遮挡。
• 验证alt文本渲染：打开浏览器开发者工具，看看Image组件生成的DOM结构里，<img>标签的alt属性有没有正确带上product.name的值，要是没有，检查一下product.name是不是为空，或者数据传递有没有出错。

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