0

Estoy usando Next js junto con styled-components, estoy intentando cargar una imagen para mi componente Img, la ruta está correcta (import logo from '../public/logo.png'), sin embargo pareciera que no logra ubicar el png. No entiendo por qué pasa esto. En visual code cuando pongo el mouse sobre la ruta, y le doy a ctrl click izquierdo, me muestra la imagen perfectamente. Se renderiza la página bien, pero el logo no se muestra, pero se muestra el clásigo logo que es como una imagen rota que significa que la imagen no se pudo cargar.

import styled from 'styled-components';
import logo from '../public/logo.png';

const Logo = styled.div`
    width: 100px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
`;

const Img = styled.img`
    heigth: 30px;
`;

const Name = styled.div`
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
`;

const Aseguradora = styled.span`
    font-family: Montserrat;
    font-style: italic;
    font-size: 12px;
`;

const UCAB = styled.span`
    font-family: "Open Sans";
    font-size: 24px;
    letter-spacing: 3px;
`;

export default function(){
    return (
        <Logo>
            <Img src={logo} />
            <Name>
                <Aseguradora>Aseguradora</Aseguradora>
                <UCAB>UCAB</UCAB>
            </Name>
        </Logo>
    );
}

1
  • En base a lo leído en la documentación de Next, ¿intentaste importarlo directamente con /logo.png? ¿o en vez de importarlo, asignarlo en un const? (Ej.: const logo = '/logo.png').
    – padaleiana
    el 12 ene. 2022 a las 19:45

2 respuestas 2

0

En next deberias usar el componente

<Image src={logo} alt="logo"/> o <Image src={logo} alt="logo"> </Image> 

que se importa de  => import Image from "image/next" 

te recomendaria ver mas informacion sobre el componente porque tenes caracteristicas para meterle adentro https://nextjs.org/docs/api-reference/next/image

0

si obtiene la imagen de la carpeta public lo que puede hacer es crear una carpeta llamada img dentro de la carpeta public y agregas la imagenes

   <div style={{ position: 'relative', width: '300px', height: '500px' }}>
      <Image
        alt="logo"
        src={"/img/logo.png"}
        layout="fill"
        objectFit="contain"
      />
   </div>

te voy a dejar varios ejemplos se encuentra en este link https://github.com/vercel/next.js/tree/canary/examples/image-component/pages

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.