如何将Next.js Image组件的placeholder默认值设为blur？

Next.js的Image组件默认placeholder属性为empty，如果你的站点几乎所有图片都需要模糊占位符，最稳妥且易维护的方式是封装自定义Image组件，而非修改框架原生配置，具体实现如下：

实现自定义Image组件 #

创建一个全局复用的自定义组件，将placeholder的默认值设为blur：

// components/CustomImage.jsx
import Image from 'next/image';

const CustomImage = ({ placeholder = 'blur', ...props }) => {
  return <Image placeholder={placeholder} {...props} />;
};

export default CustomImage;

之后在项目所有需要使用图片的地方，导入这个CustomImage代替原生的next/image组件即可。如果某张图片不需要模糊占位符，只需手动传入placeholder="empty"覆盖默认值。

不建议直接修改框架默认值的原因 #

Next.js本身没有提供全局配置placeholder默认值的官方选项，强行通过修改框架源码或hack方式修改默认值存在以下问题：

• 依赖blurDataUrl的强制要求：使用placeholder="blur"时必须配合blurDataUrl属性（本地图片可自动生成，远程图片需手动提供），全局默认后若遗漏配置会导致报错或异常显示。
• 升级维护成本高：直接修改Next.js内部代码的话，框架版本升级时你的自定义修改会被覆盖，每次升级都需要重新调整。
• 灵活性缺失：全局强制默认后，后续若有特殊场景不需要模糊占位，或者需要调整默认行为，修改起来比自定义组件更繁琐。

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