react-pdf渲染Firebase Storage图片遇ctx.embedImage报错求助

问题描述 #

使用react-pdf渲染包含热水浴缸型号信息的PDF，数据通过model对象传入，其中包含Firebase Storage的有效图片URL，但渲染时抛出TypeError: ctx.embedImage is not a function错误，图片无法显示。已尝试以下方案均未解决：

• 配置craco无效，返回带请求参数的src时触发CORS错误（已配置Firebase Storage允许localhost读写）
• 将图片转为Base64格式，仍出现原报错
• 配置CORS规则，但无法将图片存入项目公共文件夹

可行解决方案 #

1. 适配react-pdf版本的异步图片加载逻辑 #

react-pdf v3+版本对远程图片加载的异步处理要求更严格，需确保图片资源加载完成后再渲染：

import { useState, useEffect } from 'react';
import { Document, Page, Image } from '@react-pdf/renderer';

// 封装异步加载图片的工具函数
const fetchImageBlob = async (imageUrl) => {
  const res = await fetch(imageUrl);
  const blob = await res.blob();
  return URL.createObjectURL(blob);
};

const HotTubPdf = ({ model }) => {
  const [processedImageSrc, setProcessedImageSrc] = useState(null);

  useEffect(() => {
    if (model.imageUrl) {
      fetchImageBlob(model.imageUrl).then(src => setProcessedImageSrc(src));
    }
  }, [model.imageUrl]);

  return (
    <Document>
      <Page>
        {/* 图片加载完成后再渲染 */}
        {processedImageSrc && <Image src={processedImageSrc} alt="Hot Tub Model" />}
        {/* 其他型号信息内容 */}
      </Page>
    </Document>
  );
};

export default HotTubPdf;

2. 修正Firebase Storage CORS配置 #

确保CORS规则完全允许你的请求来源，步骤如下：

1. 创建cors.json文件：

[
  {
    "origin": ["http://localhost:3000", "https://your-production-domain.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Google Cloud SDK的gsutil工具上传配置：

gsutil cors set cors.json gs://your-firebase-storage-bucket-name

注意：配置修改后需等待5-10分钟生效，且请求图片时避免附加不必要的查询参数，防止触发CORS校验失败。

3. 降级react-pdf版本（临时兼容方案） #

若新版本存在图片处理兼容性问题，可降级至v2.x版本，该版本对远程图片加载逻辑更稳定：

npm install @react-pdf/renderer@2.2.0

降级后直接使用原始URL渲染图片：

<Image src={model.imageUrl} alt="Hot Tub Model" />

4. 确保Canvas环境依赖完整 #

react-pdf依赖Canvas处理图片，需确认项目已正确安装相关依赖：

1. 安装canvas包：

npm install canvas

2. 若使用craco，在craco.config.js中添加配置：

module.exports = {
  webpack: {
    configure: (config) => {
      config.resolve.alias.canvas = false;
      return config;
    },
  },
};

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