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

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;
However, when I attempt to deploy it using "require()", it only shows a broken picture link, or nothing at all. For example, here is the exact same snippet using the require() method, yet does not work:
import React from "react";
import "./NavbarLandingPage.css";
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={require("./Inventory-Deals-LOGO-2021-White.png")}
></img>
</a>
</nav>
</div>
)
}
}
export default NavbarLandingPage;
One last thing to add - I ran an npm audit fix on vulnerabilities just before I began to take my HTML wireframes and convert them into React Components. One of the issues it wanted to fix caused "breaking changes", which I am sure wasn't a good thing...
Hope this provides enough information to let me know what I am doing wrong here. I would rather bring the images in using require(), as I would assume that would be the best way if rendering images dynamically through API calls, etc...
Thank you in advance for any and all help!

Answer 1

Could you try to use this instead
require("./Inventory-Deals-LOGO-2021-White.png").default
That fixed the issue for me.