Reactjs 默认标志 img url答案

【问题标题】：Reactjs default logo img urlReactjs 默认标志 img url
【发布时间】：2020-08-01 18:24:52
【问题描述】：

我刚刚开始使用 Reactjs。 App.js 文件中的默认代码具有 react 徽标。在浏览器中检查此徽标的 img 标签时，我看到以下 src url。

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

但我在本地项目目录中的任何地方都找不到“/static/media/”路径，也没有在任何地方找到文件“logo.5d5d9eef.svg”。这张图片是从哪里提供的？

【问题讨论】：

JavaScript 将其映射到不同的服务位置。你有./src/logo.svg。

标签： reactjs image src

【解决方案1】：

您看到的这个徽标是从 /src/logo.svg 提供的。

static/media/ 是根据 react 的构建方式和向用户显示的方式生成的。

这是最初的 create-react-app 结构：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

【讨论】：

【解决方案2】：

主要是关于 Webpack（由 create-react-app 使用）。如您所见，原始文件名为logo.svg。 Webpack 检测 import logo from './logo.svg' 之类的导入，并将导入的文件转换为后缀为 logo.5d5d9eef.svg 的资产。这是使资产名称唯一所必需的。请先了解 Webpack。

【讨论】：