1

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

我的文件夹结构如下:

|src
 |Assets
 |Common
 |Components

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

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

然而,按照同样的结构加载图像并没有奏效

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

我究竟做错了什么?

谢谢

4

1 回答 1

1

在您的代码中,您根据 React 应用程序的位置提供图像源,该位置与 Web 应用程序的根位置无关,也与媒体静态文件位置(待配置)无关,因此浏览器将不知道如何呈现它。根据您使用的服务器(nginxExpress),您必须配置静态和/或媒体文件,然后根据您的配置方式在图像源中指定。

在您目前的情况下,您可以执行以下操作:

进口

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

然后使用它:

<img src={reactImage.default} />

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

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

假设媒体位置已配置并指向您的Assets的父目录。

在您的示例中,您假设 React 导入的相对路径和硬编码到图像标记中的图像源相同,但实际上并非如此。

于 2020-04-17T00:51:56.043 回答