Displaying PDF file in Gatsbyjs Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Displaying PDF file in Gatsbyjs without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am pretty new to Gatsbyjs and trying to build my portfolio for professional purpose. One issue though: when i try to link my pdf the address bar url adds some extra char. address bar

import resume from "../../static/samplepdf.pdf"

<li>
     <label htmlFor="resume">resume: </label>
            <a href={resume} target="_blank" rel="noreferrer" id="email">
              <FaNews className="social-icon"></FaNews>
              resume
            </a>
          </li>

Answer

As it has been said by @Quentin, this is the normal behavior when dealing with the static folder in Gatsby, the purpose of the hashed URL is to avoid the browser to cache old versions of the asset.

However, you can customize it a little bit the output using this approach:

<a href={`/samplepdf.pdf`} target="_blank" rel="noreferrer" id="email">
  <FaNews className="social-icon"></FaNews>
  resume
</a>

What will construct a URL like localhost:8000/samplepdf.pdf

We are here to answer your question about Displaying PDF file in Gatsbyjs - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji