react-pdf rendering images from backend url doesn't load images

Question

I am trying to render pdf using react-pdf the issue I am facing is that I am displaying image from the backend server using the URL. But it displays blank in the pdf. When I debugged further came to know that when I put breakpoint on the highlighted line the image gets displayed. May be it gets little time to load the image from remote URL ?

        <Page size="A4" style={styles.page}>
                            {this.state.productsToBeExported.map((product) => {
                                const img = this.getImageSource(product); 
                              //if breakpoint is added here then the images are displayed
                                return (
                                    <View
                                        key={product.productId}
                                        style={styles.section}
                                    >
                                        <Image
                                            style={{
                                                width: imgWidth + "px",
                                                border: "2pt solid #999898",
                                            }}
                                            src={img}
                                        ></Image>
        </View>)
    });
    </Page>


//remote Image Url (Node server)
getImageSource(product) {
     return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;           
}
            

PDF OUTPUT

Any help would be much appreciated.

Note: These images are generated in the backend on the fly. So I can't import them.

Answer 1

I ran into the same issue and it seems to be an issue with react-pdf. It seems to be showing files with the .jpeg extension only