图像源找不到图像[重复]答案

【问题标题】：Image source not finding the image [duplicate]图像源找不到图像[重复]
【发布时间】：2021-08-24 14:21:17
【问题描述】：

我正在尝试在我的 React 组件中添加图像，但由于某种原因，总是显示替代文本

这就是我在组件导航栏中获取图片的方式

<img src="../assets/images/nav_logo.png" alt="Petapilot" className="site-logo"></img>

这是我的项目结构

我的路错了吗？

【问题讨论】：

【解决方案1】：

根据 webpack 打包文件的方式，当 React 编译时，图像可能在其他地方。

试试这个方法：

import NavLogo from '../assets/images/nav_logo.png';


<img src={NavLogo} alt="Petapilot" className="site-logo"></img>

【讨论】：

【解决方案2】：

您需要像这样将图像导入到您的组件中

import logo from '../assets/images/nav_logo.png'

然后在你的img标签中像这样使用它

<img src={logo} alt="Petapilot" className="site-logo"></img>

【讨论】：

【解决方案3】：

在这种情况下，提供图像的相对路径将不起作用，您可以将其保存在公用文件夹中并提供图像的绝对路径或者你可以像这样导入图片

import Img from '../assets/images/nav_logo.png';
..
....
.....
<img src={Img} alt="Petapilot" className="site-logo"/>

【讨论】：