时间戳

首页 > 解决方案 > 在 React JS 中为资产创建静态链接

javascript - 在 React JS 中为资产创建静态链接

问题描述

我需要创建一个活动 url 或链接，以在我的应用程序中显示资产。

因此，例如 dog.png 应该在以下位置找到：localhost:3000/static/media/dog.png

在 React 中，对于图像文件，如果我这样做了

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

cat_png 实际上将包含以下对我有用的值：

http://localhost:3000/static/media/cat.35853d78.png

尽管 javascript 将 cat.png 更改为 cat.35853d78.png 在我的情况下这很好，因为我有一个指向该资产的静态 URL……（你怎么称呼这种链接？它被称为资产链接吗？）.. .

但是，如果我这样做，对于我的 json 文件：

import animals_json from '../../game_book/images/animals.json';

animal_json 实际上将包含 json 文件的内容，例如

{frames: {…}, meta: {…}}

并且没有给我一个可以显示 json 文件内容的活动 URL。

我想要的是一个链接，例如：

http://localhost:3000/static/media/animals.json

这将显示我的文件的内容

我正在阅读一本关于 javascript 游戏编程的书，示例代码通过资产的那些活动 URL 链接加载资产....

这个怎么做？

标签： javascriptreactjsimportgame-engine

解决方案

Webpack 4 提供对 json 文件的原生处理。这意味着默认情况下，json 文件的导入将由 webpack 处理，当我们尝试导入时，我们总是将 json 作为 javascript 对象。

请参阅 Loaders 部分下的 Webpack 文档https://webpack.js.org/concepts/ -

开箱即用，webpack 只理解 JavaScript 和 JSON 文件。

因此，如果您想覆盖此行为并将 json 作为 URL 导入，则必须添加一个额外的加载程序，该加载程序可以处理 json 文件并修改默认行为。

其中之一是 url-loader。在您的 webpack.config.js 中添加以下行 - 

       {
          test: /\.json$/,
          loader: 'url-loader',
          options: {
            limit: false,
            publicPath: 'assets'
          },
          type:'javascript/auto'
        }

这会将所有 json 文件加载为 url。

推荐阅读