Next.js Image组件显示异常，如何开启优化并正常显示？

问题概述 #

使用自定义BlurImage组件时，开启Next.js Image优化（unoptimized=false）会出现图片显示错误，仅设置unoptimized=true时图片正常显示。已尝试添加缓存标头和minimumTTL配置，问题未解决，需实现开启图片优化同时正常显示图片。

排查与解决方案 #

1. 配置图片源跨域权限 #

Next.js图片优化需要访问外部图片源，若图片托管在第三方域名，必须完成两项配置：

• 在next.config.js中添加remotePatterns，允许目标域名的图片优化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '你的图片托管域名', // 替换为实际域名
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

• 图片服务器需配置CORS头，允许你的Next.js应用域名访问，例如设置Access-Control-Allow-Origin: https://你的应用域名。

2. 确保width/height为图片真实尺寸 #

Next.js Image组件的width和height参数要求是原始图片的实际像素尺寸，而非容器的CSS尺寸。若传入值与图片真实尺寸不匹配，会导致优化后的图片加载失败或变形：

• 确认传入BlurImage的width和height是图片的真实像素值；
• 若无法提前获取图片尺寸，可改用fill模式配合容器相对定位：

// 修改Image组件配置
<Image
  src={imageUrl}
  alt={alt}
  fill
  sizes="100vw"
  quality={100}
  style={{
    opacity: inView ? 1 : 0,
    objectFit: 'cover', // 根据需求调整为contain等
  }}
  priority={hasPriority}
  unoptimized={false}
/>
// 同时给img-wrapper容器添加样式：position: relative

3. 移除手动srcSet与Next.js优化的冲突 #

当前组件中使用<picture>标签自定义srcSet，但Next.js Image组件会自动生成优化后的响应式srcSet，手动配置会干扰内置优化逻辑：

• 移除自定义的<picture>和<source>标签，让Next.js自动处理响应式图片；
• 若需自定义响应式规则，可在next.config.js中配置deviceSizes或imageSizes，让组件自动生成符合需求的srcSet：

const nextConfig = {
  images: {
    deviceSizes: [320, 480, 768, 1024, 1280], // 自定义适配的屏幕尺寸
  },
};

4. 清除缓存并检查依赖 #

• 执行next clean清除Next.js缓存，再重启开发服务器，避免旧优化缓存导致异常；
• 生产环境自托管时，确认已安装sharp依赖（Next.js图片优化核心依赖）：

npm install sharp

5. 调试图片请求状态 #

打开浏览器开发者工具的Network面板，查看优化后图片的请求：

• 若返回403：检查remotePatterns或CORS配置是否正确；
• 若返回404：确认图片URL有效，或图片格式不被Next.js支持（仅支持JPEG、PNG、WebP、AVIF等）。

修正后的示例组件 #

"use Client";
import Image from "next/image";
import { useInView } from "react-intersection-observer";

export default function BlurImage({
  imageUrl,
  alt,
  height,
  width,
  hasPriority,
}) {
  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });
  return (
    <div ref={ref} className="img-wrapper" style={{ position: 'relative' }}>
      <Image
        src={imageUrl}
        alt={alt}
        height={height}
        width={width}
        fill={!width || !height}
        sizes="100vw"
        quality={100}
        style={{
          opacity: inView ? 1 : 0,
          width: width ? "100%" : undefined,
          height: height ? "auto" : undefined,
          objectFit: 'contain',
        }}
        priority={hasPriority}
        unoptimized={false}
      />
    </div>
  );
}

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