在 React 中导入文件的不同方法答案

【问题标题】：Different ways to import files in React在 React 中导入文件的不同方法
【发布时间】：2020-02-05 08:59:53
【问题描述】：

目前我在 React 应用程序的客户端文件夹中导入文件的方式是使用我认为使用 Webpack 的 import 语句。例如

import cat_png from '../../game_book/images/cat.png';

这有它的限制，因为 Webpack 配置.....

我想知道是否有不同的方式来访问 React 项目中的文件....

我对当前导入方式的问题是，如果我导入 png，它确实会给我一个静态链接例如

localhost:8000/static/media/cat.png

但是当我导入一个 json 文件时从'../../game_book/images/animals.json'导入animals_json；我不明白

localhost:8000/static/media/animals.json

但是json的实际内容例如

{frames:....}

我需要的是一种一致的方式来访问我的反应应用程序的客户端文件夹中的文件夹内的资产...... 因此，如果我有一个 json 文件，我希望能够通过 ./myassets/animals.json 或者如果它是图像 ./myassets/myimage.png 等等。就像我在没有 React 的情况下使用纯 html 文件时一样......我可以通过以下方式访问与 html 文件位于同一文件夹内的文件夹。/文件夹名称然后如果文件夹名中有一个 myimage.png ，那么我可以通过 ./文件夹名/myimage.png

我有什么选择？我可以使用 React-router 创建自己的静态媒体链接吗？

【问题讨论】：

标签： javascript reactjs webpack react-router craco

【解决方案1】：

这是因为配置中不同加载程序的操作，图像由url-loader 和file-loader 处理，这为您提供了 URL 或 base64 数据路径。 JSON 由 json-loader 加载，它将内容作为对象获取。

如果您需要将这些资产导入 webpack 并获取它们的 URL，您必须修改加载器才能这样做。但如果您只需要使用资产的 URL，则可以使用 public 文件夹。

如果你把一个文件放到 public 文件夹，它不会被 Webpack 处理。相反，它将被原封不动地复制到构建文件夹中。要引用公用文件夹中的资产，您需要使用一个名为 PUBLIC_URL 的特殊变量。

在 index.html 中，你可以这样使用它：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico">

不同的缺点和好处在docs中讨论

【讨论】：