diegomura / diegomura/react-pdf
PDF Generation Issue: Footer Images Not Rendering & "Buffer is not defined" Warning
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
When generating a prescription PDF using @react-pdf/renderer, the footer image fails to render on the deployed Netlify environment, although the header image and a separate signature image (both loaded via URL) render correctly. Additionally, the console displays "Buffer is not defined" and "Not valid image extension" warnings.
The issue initially arose when deploying, as image assets loaded from the frontend's public folder failed to load, reporting "Buffer is not defined". Moving the image assets to the backend and providing direct URLs resolved the header and signature issues, but the footer image issue persists only on the deployed version.
---
**Screenshots**
**LocalHost When Making pdf with images in the public folder(Header & Footer Visible)**
---
**Netlify when making pdf with images in the public folder(Both Header and Footer not Visible)**
---
**Local/Netlify when making pdf with images coming from backend(Header Visible but not Footer)**
But the Image Path is correct when accessed in browser directly
---
## Code for when Header is working fine but footer is not
```jsx
// pdfHeader.jsx
import React from "react";
import { View, Text, Image } from "@react-pdf/renderer";
import { styles } from "../styles";
import { environmentUrls } from "../../../constants";
const PDFHeader = () => {
const HeaderImg = `${environmentUrls.file_url}/uploads/document-header.png`;
console.log("HeaderImg", HeaderImg);
return (
{/* Logo or left content */}
);
};
export default PDFHeader;
```
```jsx
//pdfFooter.jsx
import { Image, View } from "@react-pdf/renderer";
import { styles } from "../styles";
import { environmentUrls } from "../../../constants";
const PDFFooter = () => {
const FooterImg = `${environmentUrls.file_url}/uploads/document-footer.png`;
console.log("FooterImg", FooterImg);
return (
);
};
export default PDFFooter;
```
Also Styling is not an issue since FooterImg when replaced with header's link , renders successfully at the footer's place
PDF Library: @react-pdf/renderer v4.3.0
Browser: Google Chrome
Operating System (Dev): Linux Ubuntu
Deployment: Netlify
Contributor guide
Assessment
This issue has not been assessed yet.