React-Pdf中Base64图片无法显示的问题求助

• 确认Base64格式有效性

  • 检查Base64字符串开头是否包含正确的MIME类型前缀，比如data:image/png;base64,——缺失前缀会导致React-Pdf无法识别图片类型，直接显示空白。
  • 可将Base64字符串复制到浏览器地址栏访问，验证图片本身是否正常，排除字符串损坏的可能。

• 正确使用Image组件属性

  • React-Pdf的Image组件仅支持src属性，不兼容source属性，之前的source尝试属于错误用法，需统一使用src传入Base64字符串。
  • 示例代码：

    import { Document, Page, Image } from '@react-pdf/renderer';
    
    const MyPdfDocument = () => {
      // 完整带MIME前缀的Base64字符串
      const base64Img = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD...';
      return (
        <Document>
          <Page>
            <Image src={base64Img} style={{ width: 150, height: 150 }} />
          </Page>
        </Document>
      );
    };
    

• 补充明确的样式设置

  • 必须给Image组件设置固定的width和height样式，React-Pdf的Image默认无尺寸，会导致渲染出空白区域。PDF渲染中优先使用固定像素值，避免百分比尺寸。

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