Why is my image not being displayed in React?

Question

In my React app I'm trying to display an image in the project's directory. In the browser that image is being displayed as the Google Chrome default image when a file cannot be found. Could someone tell me if I'm importing my image correctly?

Component trying to render the image:

import React from "react";
import "../css/navbar.css";

export default function Navbar() {
    return (
        <div className="navbar-container">
            <img src="../images/logo.png" className="logo" />
        </div>
    );
}

What I'm seeing: