Estoy tratando de insertar una imagen en mi componente principal, todo funciona bien, mi atributo alt se muestra pero la imagen no se muestra en el navegador. por favor que estoy haciendo mal
import port from "../public/port.png"; export default function Main() { return ( <section className=""> <div className=""> <img src={port} alt="illustration" /> </div> </section> ); }si su archivo existe en una carpeta pública, entonces no tiene que importarlo. es accesible globalmente.
export default function Main() { return ( <section className=""> <div className=""> <img src="/port.png" alt="illustration" /> </div> </section> ); }Usar etiqueta de image
<img src="/public/port.png" alt="your alt">next/image se ha introducido desde v.10.0.0. Puedes usar cualquiera
import port from "../public/port.png"; <Image src={port} alt="your alt" // width={500} automatically provided // height={500} automatically provided // blurDataURL="data:..." automatically provided // placeholder="blur" // Optional blur-up while loading /> // Example external source module.exports = { images: { domains: ['example.com'], }, } <Image src="https://example.com/image1.png" // ... />