React项目图片路径正确却无法显示且无报错问题求助

我是React新手，跟着教程实操时碰到个问题：网页里的图片显示不出来，但教程里能正常展示，而且控制台和终端都没报错，搞不懂哪里出问题。

以下是我的相关代码文件：

index.js文件 #

import React from "react";
import {createRoot} from "react-dom/client"
import App from "./App.js"
import "../src/style.css"

const root = document.getElementById("root")
createRoot(root).render(
    <App/>
)

Navbar.js文件 #

import React from 'react';
// import Images from '../images/Images.js'


function Navbar() {
  return (
    <nav>
        <img src="../images/airbnb1.png" alt="" className='nav--logo'/>
    </nav>
  )
}

export default Navbar

App.js文件 #

import React from 'react'
import Navbar from './components/Navbar'

// import Hero from './components/Hero'

function App() {
  return (
    <div>
        <Navbar  />
        {/* <Hero /> */}
    </div>
  )
}

export default App

编译结果无报错：

Compiled successfully!

You can now view airbnb in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

React项目里直接用相对路径引用本地图片，容易因为webpack的打包机制导致资源找不到，这是新手常遇到的问题，给你两种可行的解决方式：

• 方式一：把图片放到public目录
  将airbnb1.png移动到项目根目录的public文件夹中，然后修改Navbar.js里的图片路径：

  <img src="/airbnb1.png" alt="Airbnb logo" className='nav--logo'/>
  

  public目录下的资源会被直接复制到打包后的根目录，用根路径引用不会出现路径匹配问题。

• 方式二：在组件中导入图片
  如果图片放在src/images目录下，直接在Navbar.js里导入图片，用导入的变量作为src值：

  import React from 'react';
  import airbnbLogo from '../images/airbnb1.png';
  
  function Navbar() {
    return (
      <nav>
          <img src={airbnbLogo} alt="Airbnb logo" className='nav--logo'/>
      </nav>
    )
  }
  
  export default Navbar
  

  webpack会自动处理导入的图片，为它分配正确的打包后路径，这样引用就不会出错。

另外可以检查下图片文件名和路径是否完全匹配，注意大小写差异（比如Linux系统对文件名大小写敏感），确保airbnb1.png确实存在于对应的目录中。

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