React 导入文件夹导航

Question

我正在尝试从我的 React 应用程序的 src 文件夹中的资产文件夹导入图像，但由于某种原因无法识别路径。

我的文件夹结构如下：

|src
 |Assets
 |Common
 |Components

我正在尝试从 components 文件夹中导入位于 assets 文件夹中的图像。通过执行以下操作，我能够从我的公共文件夹导入到组件文件夹中的文件：

import * as Constants from '../Common/Constants';

然而，遵循同样的加载图像结构并没有奏效

<img src = '../Assets/myimg.png'></img>

我做错了什么？

谢谢

Answer 1

在您的代码中，您根据 React 应用程序的位置提供图像源，这与 Web 应用程序的根位置无关，也与 media 或 无关static 文件位置（待配置），因此浏览器将不知道如何呈现它。根据您使用的服务器（nginx、Express），您必须配置 static and/or media 文件，然后根据您的配置在图像源中指定。

根据您目前的情况，您可以执行以下操作：

导入

const reactImage = require("../Assets/myimg.png");

然后使用它：

<img src={reactImage.default} />

如果您的服务器上已经配置了媒体文件并正确解析，那将只是

<img src="/media/Assets/myimg.png" />

假设 media 位置已经配置并且指向您的 Assets 的父目录。

在您的示例中，您假设 React 导入的相对路径和硬编码到图像标签中的图像源是相同的，但实际上它们不是。

React 导入文件夹导航

React import folder navigation

reactjs

directory

directory-structure