Tengo un componente de barra de navegación que simplemente muestra un logotipo. Funciona muy bien en un entorno de desarrollo y cuando se compila la versión de producción y también se ve localmente. Una vez que se carga en Netlify, es cuando la imagen desaparece al azar. Tengo otra imagen que se usa en la misma carpeta pública en css para una imagen bg y funciona bien.
A continuación se muestra el componente que es la barra de navegación y un enlace al sitio para ver el problema.
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> </> ) }Podría agregar que también estoy usando React-Bootstrap, aunque dudo que eso importe.
Aquí está el enlace al sitio en vivo actual: https://rumba405.netlify.app/
Cuando abrí la referencia de tu imagen, se resuelve en
Que luego se queja de este 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"]} Puede intentar agregar ipx como una dependencia a su proyecto para que lo resuelva
Netlify mismo señala que están tratando de optimizar las imágenes además de la next/image
Otros también se quejan.