在 React 应用程序中使用 typescript 超链接到 pdf 文件答案

【问题标题】：Hyperlink to a pdf file using typescript in React Application在 React 应用程序中使用 typescript 超链接到 pdf 文件
【发布时间】：2021-03-07 00:49:37
【问题描述】：

这个问题似乎在这个论坛上被问过很多次。但是所有这些显然都对我的问题没有帮助，这就是我想发布它的原因。

问题陈述：在反应应用程序中使用 href com 时，该应用程序导航到存储在使用 typescript 的公用文件夹下的 pdf 文件给出 404 未找到错误。

<a href = "/test.pdf" target = "_blank">HyperLink</a>

文件夹结构

有人可以带我在这里找出问题吗？或者有什么其他方法我可以尝试？

【问题讨论】：

这能回答你的问题吗？ React - How to open PDF file as a href target blank
面临的问题与路径无法从 thenfolder import Pdf from '../test.pdf' 导入文件有关；它说找不到模块'/src/temp/test.pdf'或其相应的类型声明.ts（2307）
这个<a href = "/test.pdf" target = "_blank">HyperLink</a>放在哪里？
@SarunUK 它位于公共文件夹下，我尝试使用此导入的地方是 src 文件夹中的 ContainerBody.tsx
假设锚点在 index.html 中。然后你必须像这样访问---->'./test.pdf'

标签： reactjs typescript

【解决方案1】：

您应该像这样导入该图像

import documentPdf from './public/test.pdf';

那你就可以把它当成一个href源了：

<a href={documentPdf} target="_blank">HyperLink</a>

【讨论】：

公用文件夹不在src目录下，需要绝对路径。
Tiago Vaccari：谢谢您的回答。我已经尝试过了，但遇到了错误。找不到模块“./public/test.pdf”或其对应的类型声明.ts(2307)。
@harun 路径 './public/test.pdf' 只是一个例子。为获得最佳实践，您应该创建一个 tmp 或 assets 文件夹并将该文件复制到其中。然后，您应该使用绝对路径来获取文件访问权限。
@TiagoVaccari 我做了。仍然是同样的错误。找不到模块
这是因为相对路径仅在src 目录中有效。