React项目中img标签src无法加载图片，正确路径是什么？

你已经通过import image from '../../Assets/Images/andarjani.png'正确引入了图片资源，但在<img>标签里仍使用了相对路径，这是导致加载失败的核心原因——React项目打包时，src目录下的静态资源路径会被webpack重新处理，直接写相对路径无法指向正确的打包后资源。

解决方法有两种：

方法一：使用已导入的变量 #

直接将<img>的src替换为你导入的image变量：

<Navbar.Brand>
  <img src={image} alt='logo' />
</Navbar.Brand>

方法二：将图片移至public目录并使用绝对路径 #

如果不想通过import引入，可将图片文件移动到项目根目录的public文件夹下（比如public/Assets/Images/andarjani.png），然后使用绝对路径访问：

<Navbar.Brand>
  <img src="/Assets/Images/andarjani.png" alt='logo' />
</Navbar.Brand>

补充说明 #

• src目录下的资源必须通过import/require引入，webpack会在构建时将其复制到输出目录并生成正确的访问路径；
• public目录下的资源不会被webpack处理，可直接通过根路径（以/开头）访问，适合无需webpack处理的静态资源。

内容的提问来源于stack exchange，提问作者mehdi