why isn't my Image getting displayed even though i have given the correct direction for "src"

I’m new to react and while i was following a tutorial i havee encountered this problem where image won’t display in my webpage but it does in the tutorial and there is no errors in my console or in my terminal so im litle bit conused.

This is my index.js file

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/>
)

This is my Navbar.js file

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

This is my App.js file

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

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

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

export default App

It dosen’t give any errors either.

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

>Solution :

Usually in ReactJs, Images reside under the folder "public/images" ( I am hoping, you are storing images in this folder ) in the project folder structure. And, the path to that folder is like this:

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