Soy principiante en React y Next, y comencé a trabajar en este proyecto. Tengo una función en la que necesito cargar una imagen de perfil, pero cada vez que cargo la imagen, se activa un error.
Error: Prop src no válido (http://localhost:3333/files/ ALGUNA IMAGEN.jpg) en next/image , el nombre de host "localhost" no está configurado en las imágenes en su next.config.js Ver más información: https:// nextjs.org/docs/messages/next-image-unconfigured-host
.next\static\chunks\pages\_app.js (604:22) @ defaultLoader 602 | } 603 | if (process.env.NODE_ENV !== 'test' && !configDomains.includes(parsedSrc.hostname)) { > 604 | throw new Error(`Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` + `See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`); | ^ 605 | } 606 | } 607 | } Mi next.config.js
module.exports = { images: { domains: [process.env.API_STORAGE_DOMAIN] } }¡Problema resuelto! Solo agrego "localhost" en mis dominios en next.config.js
Puede crear una función de cargador para cargar la imagen desde su destino y luego llamar a la función de cargador en el atributo de cargador de la etiqueta de imagen.
Aquí está la sintaxis para una función de cargador (tomada de la documentación de la función de cargador next.js ):
import Image from 'next/image' const myLoader = ({ src, width, quality }) => { return `https://example.com/${src}?w=${width}&q=${quality || 75}` } const MyImage = (props) => { return ( <Image loader={myLoader} src="me.png" alt="Picture of the author" width={500} height={500} /> ) }Vea también las soluciones aquí, especialmente el código de función del cargador de muestra de Taskmaster: