React项目导入本地PDF简历并实现浏览器点击预览，解决导入报错

问题原因 #

你遇到的报错有两个核心问题：

1. 路径错误：React 项目中public文件夹和src文件夹是平级关系，你在src/portfolio.js里写./public/ABCResume.pdf，相当于在src目录下找public子文件夹，自然找不到对应文件。
2. 语法错误：你把导入的PDF资源当成了函数调用，pdf("ABCResume")的写法完全错误，导入的静态资源本身就是打包后的路径字符串，不需要额外调用。

解决方案 #

你可以选下面任意一种方案修复：

方案一：继续使用public文件夹存放PDF（推荐） #

public目录下的资源打包后会直接暴露在服务根路径，不需要导入，直接用路径引用即可：

1. 删掉portfolio.js里的import pdf from "./public/ABCResume.pdf";这行代码
2. 修改resumeLink配置为：

resumeLink: process.env.PUBLIC_URL + "/ABCResume.pdf",

process.env.PUBLIC_URL会自动适配你项目的部署路径，哪怕部署在域名子目录下也能正常访问。

方案二：将PDF放在src目录下导入 #

如果你更习惯把静态资源放在src内管理：

1. 把ABCResume.pdf从public文件夹移动到src/assets目录下（没有assets文件夹就新建一个）
2. 修改导入代码为：

import pdf from "./assets/ABCResume.pdf";

3. 修改resumeLink配置为：

resumeLink: pdf,

两种方案修改完成后重启项目，点击「See my resume」按钮就会在新标签页打开PDF预览，符合你的需求。

内容的提问来源于stack exchange，提问作者JJ.Kor