能否实现无模糊效果的Next.js Image组件占位符？

我之前也碰到过一模一样的困扰！Next.js的Image组件在使用placeholder="blur"时，会默认对blurDataURL指向的内容应用模糊滤镜——哪怕你传入的是清晰的SVG也不例外。这里有两个实用的解决方案：

方案一：自定义占位符（推荐） #

放弃使用内置的blur占位符，改用placeholder="empty"，然后手动在Image组件外层渲染你的SVG占位符。这样能完全控制占位内容的显示效果，不会有额外的模糊处理：

// 示例代码
<div className="relative w-full h-[400px]">
  {/* 你的SVG占位符 */}
  <svg 
    className="absolute inset-0 w-full h-full" 
    viewBox="0 0 200 200" 
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="100%" height="100%" fill="#f0f0f0" />
    <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#999">自定义占位</text>
  </svg>
  
  <Image
    src="/your-target-image.jpg"
    alt="目标图片"
    fill
    placeholder="empty"
    className="object-cover"
  />
</div>

当图片加载完成后，会自动覆盖掉底层的SVG，完美实现清晰的自定义占位效果。

方案二：覆盖默认模糊滤镜（hack式） #

如果你坚持要使用placeholder="blur"，可以通过CSS强制移除Next.js添加的模糊滤镜。注意这个方法依赖组件内部的DOM结构，可能在Next.js版本更新后失效：

/* 在全局样式或组件样式中添加 */
.no-blur-placeholder .next-image-placeholder {
  filter: none !important;
}

然后在Image组件中应用这个类：

<Image
  src="/your-target-image.jpg"
  alt="目标图片"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/svg+xml;base64,你的SVG Base64编码内容"
  className="no-blur-placeholder"
/>

额外提示 #

如果是Next.js 13+的App Router，Image组件的fill属性用法和之前一致，上述方案同样适用。优先推荐方案一，因为它更稳定且符合组件设计的最佳实践。

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