图片来源找不到图片

Question

我正在尝试在我的 React 组件中添加图片，但由于某些原因始终显示替代文本

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

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

这是我的项目结构

我的路径是不是错了？

Answer 1

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

试试这个方法：

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


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

Answer 2

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

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

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

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

Answer 3

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

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

Image source not finding the image