如何在Next.js中为远程图片生成blurDataUrl及解决相关问题

针对你遇到的远程图片模糊加载问题，以及lqip-modern的webpack解析错误，提供两种可行方案：

方案一：上传图片时预生成BlurHash（推荐） #

在上传到Firebase Storage阶段就生成BlurHash并存储，前端直接读取转换，避免后续生成的性能开销和打包问题。

步骤： #

1. 安装依赖

npm install blurhash sharp blurhash-to-dataurl

2. 服务端生成BlurHash并随图片上传
   以Node.js服务端上传逻辑为例：

const { encode } = require('blurhash');
const sharp = require('sharp');
const { getStorage, ref, uploadBytes } = require('firebase/storage');

// 生成BlurHash的工具函数
async function generateBlurHash(imageBuffer) {
  const { data, info } = await sharp(imageBuffer)
    .raw()
    .ensureAlpha()
    .resize(32, 32, { fit: 'inside' })
    .toBuffer({ resolveWithObject: true });

  return encode(new Uint8ClampedArray(data), info.width, info.height, 4, 4);
}

// 上传图片到Firebase Storage并附加BlurHash元数据
async function uploadImageWithBlurHash(imageBuffer, storagePath) {
  const blurhash = await generateBlurHash(imageBuffer);
  const storage = getStorage();
  const storageRef = ref(storage, storagePath);
  
  await uploadBytes(storageRef, imageBuffer, {
    metadata: {
      customMetadata: { blurhash }
    }
  });
  
  return { storagePath, blurhash };
}

3. 前端获取并转换为blurDataUrl

import { getStorage, ref, getMetadata } from 'firebase/storage';
import { encode as blurHashToDataUrl } from 'blurhash-to-dataurl';
import Image from 'next/image';
import { useState, useEffect } from 'react';

// 获取图片元数据和BlurHash
async function getImageBlurDataUrl(storagePath) {
  const storage = getStorage();
  const imageRef = ref(storage, storagePath);
  const metadata = await getMetadata(imageRef);
  const blurhash = metadata.customMetadata.blurhash;
  
  return blurHashToDataUrl(blurhash);
}

// 在组件中使用
export default function ImageWithBlur({ storagePath, imageUrl }) {
  const [blurDataUrl, setBlurDataUrl] = useState('');

  useEffect(() => {
    if (storagePath) {
      getImageBlurDataUrl(storagePath).then(setBlurDataUrl);
    }
  }, [storagePath]);

  return blurDataUrl ? (
    <Image
      src={imageUrl}
      alt="示例图片"
      blurDataURL={blurDataUrl}
      placeholder="blur"
      width={800}
      height={600}
    />
  ) : null;
}

方案二：获取图片时生成blurDataUrl（解决lqip-modern报错） #

如果无法修改上传流程，可通过Next.js API路由在服务端生成blurDataUrl，避开前端webpack对二进制文件的解析问题。

步骤： #

1. 创建API路由文件 pages/api/generate-blur.js

import { getStorage, ref, getBytes } from 'firebase/storage';
import lqip from 'lqip-modern';

export default async function handler(req, res) {
  const { path } = req.query;
  if (!path) return res.status(400).json({ error: '缺少图片路径参数' });

  try {
    const storage = getStorage();
    const imageRef = ref(storage, path);
    const imageBuffer = await getBytes(imageRef);
    
    const lqipResult = await lqip(imageBuffer);
    res.status(200).json({ blurDataUrl: lqipResult.metadata.dataURIBase64 });
  } catch (err) {
    res.status(500).json({ error: '生成模糊图失败' });
  }
}

2. 前端调用API获取并使用

import Image from 'next/image';
import { useState, useEffect } from 'react';

export default function RemoteImage({ imagePath, imageUrl }) {
  const [blurDataUrl, setBlurDataUrl] = useState('');

  useEffect(() => {
    async function fetchBlurData() {
      const response = await fetch(`/api/generate-blur?path=${encodeURIComponent(imagePath)}`);
      const data = await response.json();
      setBlurDataUrl(data.blurDataUrl);
    }
    if (imagePath) fetchBlurData();
  }, [imagePath]);

  return blurDataUrl ? (
    <Image
      src={imageUrl}
      alt="远程图片"
      blurDataURL={blurDataUrl}
      placeholder="blur"
      width={800}
      height={600}
    />
  ) : (
    // 临时占位
    <div className="w-full h-[600px] bg-gray-200"></div>
  );
}

解决lqip-modern前端打包报错（可选） #

如果一定要在前端使用lqip-modern，需在next.config.js中配置webpack处理二进制图片：

module.exports = {
  webpack(config) {
    // 添加处理图片二进制的loader
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|webp)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192, // 小图片转base64，大图片用file-loader
            fallback: 'file-loader',
          },
        },
      ],
    });
    return config;
  },
};

注意：前端处理大图片会影响性能，优先推荐服务端预生成方案。

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