reactjs - React.JS not rendering images and/or video when using require()

Question

Hopefully this is a simple question and answer, and forgive me if I am missing something easy here, as I am still a bit new to coding...

I am working on a new React App and noticed that when I deploy (for testing UI on various devices), my site is rendering fine, yet images and /or video that I add in do not show up. Please note, I have done other React apps where this works perfectly fine, which is where my confusion lies. For example, the following snippet works fine when I deploy:

import React from "react";
import "./NavbarLandingPage.css";
import logo from "./Inventory-Deals-LOGO-2021-White.png";

class NavbarLandingPage extends React.Component {
    render () {
return (
    <div>
        <nav className="navbar navbar-expand-lg navhelp">
        <a className="navbar-brand navlogo image" href="/">
          <img
          alt=""
            className="responsive"
            src={logo}
          ></img>
        </a>
      </nav>
    </div>
)
    }
}

export default NavbarLandingPage;

Answer 1

Could you try to use this instead

require("./Inventory-Deals-LOGO-2021-White.png").default

That fixed the issue for me.