Javascript 在Gatsbyjs中显示PDF文件

我对盖茨比是个新手，我正试图为专业目的建立我的投资组合。但有一个问题：当我尝试链接我的pdf时，地址栏url会添加一些额外的字符。

从“../../static/samplepdf.pdf”导入简历

简历：

正如前面所说，这是处理资产的正常行为。在盖茨比中，哈希URL的目的是避免浏览器缓存资产的旧版本

但是，您可以使用以下方法对输出进行一点自定义：

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

---

什么将构造一个URL，如

localhost:8000/samplepdf.pdf

啊，所以这里结合了两种方法

导入文件时使用Webpack跟踪依赖项。在这种情况下，文件加载器将散列文件并将其复制到构建输出（在

public

中），然后作为导入返回文件的路径（包括散列）。因此这里的

resume

变量将是一个类似

/static/lalala.pdf

的字符串

对于您不希望通过Webpack处理的文件，Gatsby支持一个

静态

文件夹，该文件夹将被复制到生成输出中而不进行修改。在这种情况下，您的

samplepdf.pdf

文件将复制到

public/static/samplepdf.pdf

，供您在网站上作为

/static/samplepdf.pdf

参考。此文件最终可能会设置与其内容无关的HTTP缓存头，从而导致过时的缓存版本。在您的特定场景中，我不会太担心，但这是嵌入在页面上的资源（例如图像、脚本等）需要注意的事情

如果您不关心正在使用的特定URL（通常我也不关心），我会选择第一种方法。如果您是从web上的其他位置链接到此文件，并且需要一致的URL，请使用第二种方法。或者，如果您想同时使用这两种方法，您可以继续使用现有的方法，而不会在将来处理此代码时产生任何问题，除非您感到困惑。

这是正常的行为（对于破坏缓存的静态文件）。这不应该是个问题。

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