You would do well to read Adding Images, Fonts, and Files in the CRA docs (example from page)
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
rather than hard-coding a path (which doesn’t work in production as src no longer exists)
Also familiarise yourself with Vite’s static asset handling as explained in