Next.js外部资源非有效图片报错：收到text/html类型响应

针对Next.js Image组件加载返回text/html类型资源时报错的问题，可通过以下几种方式解决：

1. 提前校验资源Content-Type，针对性选择组件 #

在使用Image组件前，先通过HEAD请求校验目标资源的Content-Type，仅对image/*类型的资源使用Image组件，非图片资源用普通img标签或占位图替代：

async function checkImageType(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    const contentType = response.headers.get('Content-Type');
    return contentType?.startsWith('image/');
  } catch (err) {
    return false;
  }
}

// 组件内使用示例
const isImage = await checkImageType(imageUrl);

return (
  <>
    {isImage ? (
      <Image src={imageUrl} alt="content" width={256} height={256} />
    ) : (
      <img 
        src={imageUrl} 
        alt="non-image content" 
        width={256} 
        height={256}
        onError={(e) => {
          e.target.src = '/placeholder-image.png'; // 设置自定义占位图
        }}
      />
    )}
  </>
);

2. 使用自定义Loader绕开Next.js图片服务校验 #

如果不需要Next.js的图片优化功能（如尺寸裁剪、格式转换），可以自定义loader直接返回原始图片URL，跳过Next内置图片服务的类型校验：

const customLoader = ({ src }) => {
  return src;
};

// 组件内使用示例
<Image
  loader={customLoader}
  src={imageUrl}
  alt="content"
  width={256}
  height={256}
/>

注意：此方法仅适用于资源最终可渲染为图片的场景，若资源确实是HTML，img标签加载仍会显示错误，需配合错误处理逻辑。

3. 用错误边界捕获Image组件渲染错误 #

在Image组件外层包裹错误边界组件，捕获渲染错误后自动 fallback 到占位图或其他展示方式：

class ImageErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <img src="/placeholder-image.png" alt="fallback content" width={256} height={256} />;
    }
    return this.props.children;
  }
}

// 组件内使用示例
<ImageErrorBoundary>
  <Image src={imageUrl} alt="content" width={256} height={256} />
</ImageErrorBoundary>

4. 服务端预过滤无效资源 #

在获取API数据的服务端逻辑（如getServerSideProps/getStaticProps）中，提前校验资源类型，过滤或标记非图片资源，前端直接根据标记渲染对应组件：

export async function getServerSideProps() {
  const apiData = await fetch('your-api-url').then(res => res.json());
  
  const processedData = await Promise.all(apiData.map(async item => {
    const isImage = await checkImageType(item.imageUrl); // 复用前文的checkImageType函数
    return { ...item, isImage };
  }));

  return { props: { data: processedData } };
}

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