如何在react-pdf中加载base64格式的图片？

针对你遇到的react-pdf <Image>组件渲染base64图片空白，但普通<img>正常的情况，给你几个实用的排查和解决方向：

• 统一MIME类型后缀为小写
  react-pdf的Image组件对MIME类型的后缀大小写敏感，如果你的文件名扩展名是大写（比如.PNG、.JPG），生成的data:image/PNG;base64,这种格式可能不被识别。修改代码把扩展名转成小写：

  {c.images.map((d) => {
    const ext = d.filename.split('.').pop().toLowerCase();
    const prefix = `data:image/${ext};base64,`;
    return <Image src={prefix + d.fileInBase64} width={300} />
  })}
  

• 强制指定图片尺寸
  react-pdf的Image组件不像普通img会自动识别图片尺寸，没有指定width/height时可能会渲染成0尺寸导致空白。给组件加上明确的宽高属性，或者通过style设置：

  <Image src={prefix + d.fileInBase64} width={250} height={200} />
  // 或者用style自适应
  <Image src={prefix + d.fileInBase64} style={{ width: '100%', maxHeight: 300 }} />
  

• 清理base64字符串的无效字符
  有时候后端返回的base64字符串会带有空格、换行符，普通img可以兼容，但react-pdf的Image组件无法处理。可以对base64内容做清理：

  const cleanedBase64 = d.fileInBase64.trim().replace(/\s+/g, '');
  return <Image src={prefix + cleanedBase64} width={300} />
  

• 处理GIF格式的兼容性问题
  react-pdf对GIF的支持有限，即使base64格式正确，也可能只显示第一帧或者完全不渲染。如果你的图片中有GIF，可以尝试先将其转成PNG/JPG格式的base64再传入组件。

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