I have a navbar component that simply just displays a logo. It works just fine in a dev environment and when a build the production version and view it locally too. Once it is uploaded to Netlify tho is when the image goes missing randomly. I do have another image that is being used in the same public folder in css for a bg-image and it works fine.
Below is the component that is the navbar and a link to the site to view the issue.
import Navbar from 'react-bootstrap/Navbar';
import Image from 'next/image'
import styles from './navbar.module.css';
import logo from '../../public/logo.jpg';
export default function NavigationBar() {
return(
<>
<Navbar className={styles.navbarContainer}>
<Navbar.Brand href="#home">
<Image
src={logo}
className={styles.logo}
alt="Rumba 405 logo"
width="75"
height="75"
/>
</Navbar.Brand>
</Navbar>
</>
)
}I might add that I am using React-Bootstrap too tho I doubt that matters.
Here is the link to the current live site: https://rumba405.netlify.app/
When I opened your image reference, it resolves to
Which then complains of this error
{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module 'ipx'\nRequire stack:\n- /var/task/node_modules/@netlify/ipx/dist/index.js\n- /var/task/.netlify/functions-internal/_ipx/_ipx.js\n- /var/task/_ipx.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js","trace":["Runtime.ImportModuleError: Error: Cannot find module 'ipx'","Require stack:","- /var/task/node_modules/@netlify/ipx/dist/index.js","- /var/task/.netlify/functions-internal/_ipx/_ipx.js","- /var/task/_ipx.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at _loadUserApp (/var/runtime/UserFunction.js:202:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"," at Object.<anonymous> (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"," at internal/main/run_main_module.js:17:47"]}
You can try adding ipx as a dependency to your project so it resolves it
Netlify itself notes that they are trying to optimize images on top of next/image
Others are complaining as well .