I'm trying to show my resume (local file) within a react component but have been running into issues importing it.
import myResume from '../assets/pdfs/myResume.pdf' just gives me the error:
Cannot find module '../assets/pdfs/myResume.pdf' or its corresponding type declarations.ts(2307)
and if I try to use the import like this:
import myResume from '../assets/pdfs/myResume.pdf'
function Resume() {
return (
<div>
<iframe src={myResume} />
</div>
)
}
export default Resume
It gives me a failed to compile error:
./assets/pdfs/myResume.pdf Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
I've also tried using the React-pdf package, but with the same results.
Next js looks for the files in the public folder put your assets folder in the public folder then use like this: src = "/assets/pdfs/myResume.pdf". and don't include public folder in path because it automatically looks for it inside the public folder.
Actually figured out a workaround, not sure if this is the correct way, but I was able to get it to work by just putting the src right in the iframe.
So instead of
import myResume from '../assets/pdfs/myResume.pdf'
function Resume() {
return (
<div>
<iframe src={myResume} />
</div>
)
}
I just did
function Resume() {
return (
<iframe src='/assets/pdfs/myResume.pdf' />
)
}
which seems to work well.