在 NextJS 应用程序中呈现本地 PDF 时遇到问题

Question

我试图在 React 组件中显示我的简历（本地文件），但运行导入它时遇到问题。

import myResume from '../assets/pdfs/myResume.pdf' 只是给我错误：

找不到模块“../assets/pdfs/myResume.pdf”或其对应类型 declarations.ts(2307)

如果我尝试像这样使用导入：

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

export default Resume

它给我一个编译失败的错误：

./assets/pdfs/myResume.pdf 模块解析失败：意外标记 (1:0) 您可能需要一个合适的加载器来处理这种文件类型，目前没有配置加载器来处理这种文件。参见 https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）

我也尝试过使用 React-pdf 包，但结果相同。

Answer 1

接下来js在public文件夹中查找文件，将你的assets文件夹放在public文件夹中，然后这样使用：src = "/assets/pdfs/myResume.pdf"。并且不要在路径中包含 public 文件夹，因为它会自动在 public 文件夹中查找它。

Answer 2

实际上想出了一个解决方法，不确定这是否是正确的方法，但我只需将 src 放在 iframe 中就可以让它工作。

所以不用

import myResume from '../assets/pdfs/myResume.pdf'

function Resume() {
  return (
    <div>
      <iframe src={myResume} />
    </div>
  )
}

我刚刚做了

function Resume() {
  return (
    <iframe src='/assets/pdfs/myResume.pdf' />
  )
}

这似乎工作得很好。

在 NextJS 应用程序中呈现本地 PDF 时遇到问题

Having trouble rendering a local PDF within a NextJS app

javascript

pdf

reactjs

webpack

next.js