2

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

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

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

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

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

localhost:8000/static/media/cat.png

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

localhost:8000/static/media/animals.json

但是json的实际内容例如

{frames:....}

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

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

4

1 回答 1

3

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

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

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

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

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

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

于 2019-10-08T05:19:57.860 回答