0

Estoy haciendo un blog en nextjs y estoy armando los componentes. Tengo una seccion de skills en la pagina "sobre mi" pero intento cargar imagenes para representar cada habilidad pero no se muestran. Lo interesante es que la informacion si se esta cargando y se esta ejecutando esa seccion de codigo porque hago un console.log() en esa parte del codigo y me muestra la informacion en consola, no entiendo que pasa, agradezco mucho tu ayuda. Aquí el codigo:

import React from "react";

export default function SectionSkills(props) {
  const tecnologiasLinks = {
    html: "https://i.ibb.co/BNRv1Ph/file-type-html-icon-130541-min.png",
    css: "https://i.ibb.co/4j97cVV/file-type-css-icon-130661-min.png",
    java: "https://i.ibb.co/VBRmdfR/java-22523-min.png",
    javascript: "https://i.ibb.co/Bqb3SQV/javascript-icon-130900-min.png",
    reactjs: "https://i.ibb.co/bzrsR0H/react-original-wordmark-logo-icon-146375-min.png",
    mysql: "https://i.ibb.co/hdvQwBZ/mysql-original-wordmark-logo-icon-146417-min.png",
    git: "https://i.ibb.co/D1K6nzK/git-original-wordmark-logo-icon-146510-min.png"
  }
  return (
    <article>
      <br />
      <div className="titulo">
        <h2>Habilidades</h2>
        <hr />
      </div>
      <div className="columns">
        {
          (props.tecnologias && props.tecnologias.lenght !== 0) ?
          (props.tecnologias.map(tecnologia => {
            <div className="column" sm={4} >
              <figure className="image is-128x128"  >
                <img src={tecnologiasLinks[tecnologia]} />
              </figure>
            </div>
  
          })): null
        }
        <br />

      </div>
    </article>
  );
}
3
  • utiliza el componente Image de import Image from 'next/image' para poder renderizar las imagenes
    – Enzo
    Commented el 25 ene. 2021 a las 4:24
  • Sigue sin mostrarse la imagen amigo. Me llama la atencion que tengo otras imagenes y se muestran normalmente. No entiendo porque esas no
    – Mac32
    Commented el 26 ene. 2021 a las 2:10
  • No estas retornando nada en el map, agrega el return antes de <div className="column" sm={4} > Commented el 21 abr. 2023 a las 1:55

1 respuesta 1

0

El problema está en la forma en que estás utilizando el método map para recorrer el array de tecnologías y renderizar cada elemento. Debes asegurarte de utilizar return dentro de la función de map para devolver el componente que deseas renderizar. Ademas cuando usas map es super recomendable usar un index. Hacele así:

{props.tecnologias && props.tecnologias.length !== 0 ? (
          props.tecnologias.map((tecnologia, index) => (
            <div key={index} className="column" sm={4}>
              <figure className="image is-128x128">
                <img src={tecnologiasLinks[tecnologia]} alt={tecnologia} />
              </figure>
            </div>
          ))
        ) : null}

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.