使用带有反应 pdf 的 gatsby 导入 PDF，返回错误

Question

尝试在 gatsby 中使用 react pdf 导入 PDF，但出现找不到文件错误

    import React, { useState } from 'react';
    import { Document, Page } from 'react-pdf';
    import mypdf from "../images/mypdf.pdf";
    
    export default function MyDocuments() {
        const [ numPages, setNumPages ] = useState(null);
        const [ pageNumber, setPageNumber ] = useState(1);
    
        function onDocumentLoadSuccess({ numPages }) {
            setNumPages(numPages);
            setPageNumber(1);
        }
    
        function changePage(offset) {
            setPageNumber((prevPageNumber) => prevPageNumber + offset);
        }
    
        function previousPage() {
            changePage(-1);
        }
    
        function nextPage() {
            changePage(1);
        }
    
        return (
            <div className="container">
                <Document file={mypdf} onLoadSuccess={onDocumentLoadSuccess} className="container">
                    <Page pageNumber={pageNumber} />
                </Document>
                <div className="container">
                    <p>
                        Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
                    </p>
                    <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
                        Previous
                    </button>
                    <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
                        Next
                    </button>
                </div>
            </div>
        );
    }

错误：

Failed to load PDF file.

Page 1 of --

已经尝试导入资产并执行“../images/mypdf.pdf”并且我知道文件在那里，有人知道如何修复以正确显示 PDF 吗？