Svg images and external image url are not working in react-pdf

[AlimKhan76]

Describe the bug External image url of svg and png are not working wiht react-pdf Image tag

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

You can make use of react-pdf REPL to share the snippet

Expected behavior

• The image should be loaded and rendered in the PDF

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. MacOS, Windows]
• Browser [e.g. chrome, safari]
• React-pdf version [e.g. v1.1.0]

[islam-kamel]

same issue

[AlimKhan76]

@islam-kamel can you try this,

import axios from 'axios';

export const getImageBuffer= async (url: string) => {

	const imageResponse = await axios.get(url, {
		responseType: 'arraybuffer',
	});
	console.log('Image fetched successfully');

	const imageBuffer = Buffer.from(imageResponse.data, 'binary');
	console.log('Image buffer created', imageBuffer.length);
	return imageBuffer;
};

The above might work for external non svg images

[m-muiznieks]

@islam-kamel can you try this,

import axios from 'axios';

export const getImageBuffer= async (url: string) => {

	const imageResponse = await axios.get(url, {
		responseType: 'arraybuffer',
	});
	console.log('Image fetched successfully');

	const imageBuffer = Buffer.from(imageResponse.data, 'binary');
	console.log('Image buffer created', imageBuffer.length);
	return imageBuffer;
};

The above might work for external non svg images

This worked. Images should be passed as Base64.