0

我是 Reactjs 和 Javascript 的初学者。
我读到create-react-app 可以像这样访问公用文件夹来获取图像：

  img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

但这也有效，但找不到有关它的文档：

  let photo = '/img/logo.png';

另一件事是，如果我尝试以失败的方式读取 json 文件：

let someJson = process.env.PUBLIC_URL + 'resume.json';

测试代码

 return (
      <div className="App">
      <header className="App-header">
        <img src={photo} className="App-logo" alt="logo" />
        <p>
         {someJson.basics.name} // FAIL ...
        </p>
      </header>
    </div>
  );

json

{
  "basics": {
    "name": "Foo Bar"
    }
}

为什么我能得到图像而不是 json？

4

1 回答 1

0

您可以在组件中导入 JSON 文件。这是推荐的方法，而不是使用有其缺点的公共 var 路径。

来自 React 文档

您还可以将其他资产添加到公用文件夹。请注意，我们通常鼓励您在 JavaScript 文件中导入资产 (...) 如果您将文件放入 public 文件夹，webpack 将不会处理它。相反，它将被原封不动地复制到构建文件夹中。要引用公用文件夹中的资产，您需要使用名为 PUBLIC_URL 的环境变量。

import React from "react";
// resume JSON file is at the same level than this file
import resume from "./resume.json";

export default function App() {
  return (
    <div className="App">
      <p>{resume.basics.name}</p>
    </div>
  );
}

列出了使用%PUBLIC_URL%（在 Node 中）或process.env.PUBLIC_URL（在 JavaScript 中）的缺点

  • 公用文件夹中的所有文件都不会进行后处理或缩小。
  • 缺少的文件不会在编译时被调用，并且会给你的用户带来 404 错误。
  • 结果文件名不包含内容哈希，因此您需要在每次更改时添加查询参数或重命名它们。
于 2020-08-25T10:35:35.990 回答