reactjs - React-pdf - 图像渲染两次

Question

我正在使用 https://react-pdf.org/styling我想在按下打印按钮时显示加载的图像。但是，当我打印图像时会渲染两次。

import React from "react";
import phoneLogo from "./images/phone.png";

import {
  Document,
  Page,
  Text,
  View,
  Font,
  StyleSheet,
  Image,
} from "@react-pdf/renderer";


const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src={phoneLogo} />
    </Page>
  </Document>
);

class App extends React.Component {
  render() {
    return (
      <div className="w-full">
        <div className="text-center py-12">
          <BlobProvider document={MyDoc()}>
            {({ url }) => (
              <a href={url} target="_blank">
                Print
              </a>
            )}
          </BlobProvider>
        </div>
      </div>
    );
  }
}

export default App;

我试过像这样加载图像，但它根本不显示。

const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src='/images/phone.png />
    </Page>
  </Document>
);

有什么建议吗？谢谢!!

Answer 1

已排序!!!

像这样导入图片时，png确实渲染了两次

const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src={phoneLogo} />
    </Page>
  </Document>
);

但它使用图像地址，只渲染一次。

const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src="https://img.icons8.com/android/96/000000/phone.png" />
    </Page>
  </Document>
);