我正在尝试从我的React应用程序的src文件夹中的Assets文件夹中导入图像,但是由于某种原因,该路径未被识别。
我的文件夹结构如下:
|src
|Assets
|Common
|Components
我正在尝试从components文件夹导入位于assets文件夹中的图像。通过执行以下操作,我能够从我的公用文件夹导入到components文件夹中的文件:
import * as Constants from '../Common/Constants';
但是,按照这种相同的结构加载图像没有效果
<img src = '../Assets/myimg.png'></img>
我在做什么错了?
谢谢
答案 0 :(得分:1)
在代码中,您将根据React应用程序的位置提供图像源,该位置与Web应用程序的根位置无关,也与 media 或 static 文件位置无关(待配置),因此浏览器将不知道如何呈现它。根据您使用的服务器( nginx , Express ),您必须配置静态和/或 media 文件然后根据您的配置在图像源中指定。
在当前情况下,您可以执行以下操作:
导入
const reactImage = require("../Assets/myimg.png");
然后使用它:
<img src={reactImage.default} />
如果您已在服务器上配置了媒体文件并正确解析,则为
<img src="/media/Assets/myimg.png" />
假设媒体位置已配置,并且指向资产的父目录。
在您的示例中,您假设React导入的相对路径和硬编码到image标签中的图像源是相同的,但实际上却不是。