Dynamic SVG to PNG Conversion Issue in react-pdf/renderer

[VladanIlicJS]

I’m currently working on a project where I need to render dynamic images using the react-pdf/renderer library. My initial approach was to use SVG images, but I found that I cannot render different images via url inside SVG components.

To work around this, I decided to convert SVG images to PNG format on-the-fly (cloudinary, images stored there) and then render them using the Image component from react-pdf/renderer.

Next, I attempted to create a buffer from the PNG image and then pass this buffer to the Image component. Again, I ran into the same issue.

Here’s an example of what’s happening:

• Image looks like this:
  

• But is shown like this:
  

here is my current component: (Image prop is simple url)

`import { Page, Text, StyleSheet, Image } from "@react-pdf/renderer"
import axios from "axios"
import { useEffect, useState } from "react"

const styles = StyleSheet.create({
titlePage: {
flexDirection: "column",
backgroundColor: "#F3F4DA",
width: "210mm",
height: "285mm",
paddingLeft: "16mm",
paddingRight: "16mm",
paddingTop: "30mm",
paddingBottom: "30mm",
justifyContent: "space-between",
alignItems: "center",
},
bookTitle: {
fontSize: 48,
fontWeight: "bold",
fontFamily: "Amatic",
textAlign: "center",
},
chefName: {
fontSize: 24,
fontFamily: "Amatic",
},
image: {
width: "160mm",
height: "160mm",
objectFit: "fill",
},
})

const FirstCoverPage = ({
title = "Book Title",
chefName = "Name",
image,
coverColor,
textColor,
}) => {
const [convertedImage, setConvertedImage] = useState(null)
useEffect(() => {
async function getImageBuffer(url) {
const response = await axios.get(url, { responseType: "arraybuffer" })
const buffer = Buffer.from(response.data, "binary").toString("base64")
const bufferImage = data:image/png;base64,${buffer}
setConvertedImage(bufferImage)
}
getImageBuffer(image)
}, [image])
return (
<Page style={{ ...styles.titlePage, backgroundColor: #${coverColor} }}>
<Text style={{ ...styles.bookTitle, color: #${textColor} }}>{title}
{convertedImage && (
<Image alt="image" src={convertedImage || "/images/sundae-red.png"} style={styles.image} />
)}

  <Text style={{ ...styles.chefName, color: `#${textColor}` }}>Chef {chefName}</Text>
</Page>

)
}

export default FirstCoverPage
`

[VladanIlicJS]

Don't know what was happing here, but I manually convert svg images to png and uploaded them to cloudinary again, so it works now.