diegomura / diegomura/react-pdf

PDF Generation Issue: Footer Images Not Rendering & "Buffer is not defined" Warning

Open
#3,225 0 comments 0 reactions 0 assignees View on GitHub
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)**
Image

Image

---
**Netlify when making pdf with images in the public folder(Both Header and Footer not Visible)**

Image

---

**Local/Netlify when making pdf with images coming from backend(Header Visible but not Footer)**

Image

Image

But the Image Path is correct when accessed in browser directly

Image

---

## 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.