在 React 中导入文件的不同方式

Question

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

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

由于 Webpack 配置，这有其局限性.....

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

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

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 那么我可以通过访问它 ./foldername/myimage.png

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

Answer 1

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

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

If you put a file into the public folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use a special variable called PUBLIC_URL.

Inside index.html, you can use it like this:

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

docs

中讨论了不同的缺点和优点