页面图像和文档未在直接链接上加载

Question

我在刷新或直接转到子页面时加载图像时遇到问题。当通过我的标题链接在页面之间导航时，图像加载得很好，但是当我尝试刷新页面时，图像都不会加载。

有问题的页面在这里：https://wehab.stanford.edu/team 和这里：https://wehab.stanford.edu/research

此外，如果您直接进入研究页面并尝试单击任何 PDF 链接，则不会加载相应的 PDF 以及研究页面上随附的图标。

我认为这可能与我的路径前缀设置方式有关，因为它设置为根目录而不是公用文件夹。 （见：page data not showing when directly navigating to page）。我之前遇到过路径前缀问题（请参阅Gatsby JS <Link> element in header navigation functional in localhost but not when generating static files）

任何帮助将不胜感激！

相关问题：

• page data not showing when directly navigating to page
• Gatsby - page refresh corruption
• GatsbyJS - Blog posts not loading on direct link

Answer 1

看起来您正在使用路径相对链接（它们以/ 以外的字母数字字符开头，并且未指定方案、主机名或端口），当页面最初加载时，URL 是/team/。这会导致您的图像请求转到 https://wehab.stanford.edu/team/team-imgs/john-hegarty.png 之类的路径，随后是 404：

当您在客户端导航时，页面会在 /team（无尾随斜杠）处加载，因此相同的图像 src 路径解析为 https://wehab.stanford.edu/team-imgs/john-hegarty.png（无 /team 段），结果为 200请求图像数据。

要解决此问题，您可能应该将引用图像的方式更改为始终与根目录相关（即以正斜杠开头），并在链接到带有尾部斜杠（或不带斜杠）的页面时保持一致。验证服务器本身是否返回与您使用的斜杠路径不一致的 Location 标头也是谨慎的做法。