node.js - react-pdf 从后端 url 渲染图像不加载图像

Question

我正在尝试使用react-pdf呈现 pdf我面临的问题是我正在使用 URL 显示来自后端服务器的图像。但它在pdf中显示为空白。当我进一步调试时才知道，当我在突出显示的行上放置断点时，图像就会显示出来。可能没有时间从远程 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 输出

任何帮助将非常感激。

注意：这些图像是在后端动态生成的。所以我不能导入它们。

标签： node.jsreactjsreact-pdf

Answer 1

我遇到了同样的问题，这似乎是 react-pdf 的问题。它似乎只显示带有.jpeg扩展名的文件